HTML表格内向PHP提交数据问题：音乐搜索网站点击结果无法跳转传参

首先咱们先拆解下你遇到的核心问题：你原来给<tr>标签加了action和method属性，但表格行本身完全不支持表单的这些属性，所以点击行的时候根本不会触发跳转和参数提交的逻辑。

要实现点击（或通过按钮触发）跳转并传递name、album、artist三个参数到get_music.php，最适合新手的直接方案是给每一行嵌入一个完整的表单，把参数放在隐藏输入框里，用提交按钮触发表单提交。

修正后的完整实现代码 #

HTML部分（保留你原有结构即可）

<div class="container"> 
 <div class="row"> 
 <h1>Search Results</h1> 
 <!-- BEGIN SEARCH RESULT --> 
 <div class="col-md-12"> 
 <div class="grid search"> 
 <div class="grid-body"> 
 <div class="row"> 
 <div class="table-responsive"> 
 <table class="table table-hover"> 
 <tbody id="mytable"> 
 </tbody> 
 </table> 
 </div> 
 </div> 
 </div> 
 </div> 
 </div> 
 </div> 
 </div>

JavaScript部分（重构后的可运行代码）

<script>
 window.onload= function() {
 getDataPHP();
 }
 function getDataPHP(){
 var results = <?php echo json_encode($result_array); ?>;
 renderView(results);
 }
 function renderView(results){
 var data = "";
 for (let i=0;i<results.length;i++){
 data += '<tr>';
 data += '<td class="number text-center">' + (i+1) + '</td>';
 data += '<td class="image" align="left"><img src="https://discussions.apple.com/content/attachment/881765040" alt="Album Cover"></td>';
 data += '<td class="product"><strong>'+results[i][0]+'</strong><br>'+results[i][1]+'<br>'+results[i][2]+'</td>';
 data += '<td><form method="post" action="get_music.php">';
 // 用隐藏输入框存储需要传递的参数
 data += '<input type="hidden" value="'+results[i][0]+'" name="name" />';
 data += '<input type="hidden" value="'+results[i][1]+'" name="album" />';
 data += '<input type="hidden" value="'+results[i][2]+'" name="artist" />';
 // 提交按钮触发表单跳转
 data += '<input style="float: right;" type="submit" value="Play Music" />';
 data += '</form></td>';
 data += '</tr>';
 }
 document.getElementById('mytable').innerHTML = data;
 }
</script>

关键改进点说明 #

• 表单嵌入行内：每一行的最后一列都嵌入了完整的<form>标签，表单的action指向目标PHP文件，method设为post，点击提交按钮时会自动完成参数传递和跳转。
• 隐藏参数存储：把name、album、artist三个参数放在<input type="hidden">中，这些参数会在表单提交时自动发送到get_music.php，不会在页面上显示。
• 代码结构优化：把数据获取和视图渲染拆分成两个独立函数，代码更清晰易维护，也避免了原代码中循环索引从1开始导致的数组越界风险。
• 体验升级（可选）：如果想实现点击整行就触发跳转，只需要给<tr>添加点击事件：

  data += '<tr onclick="this.querySelector(\'form\').submit()">';
  

  这样用户点击表格任意位置，都会提交该行的表单，操作更流畅。

内容的提问来源于stack exchange，提问作者Kuanyu Chwn