求助：一个动态添加表单的行并提交数据的问题

Question

问题如下：
一个表单想动态地添加行，最后将表单数据提交到后台，表单代码如下：
<table id="myTable" border="1"><tbody id="tb">
<form action="back.php" method="post">
    <tr>
        <th>文件路径:</th>
        <td><input type="text" size="20" name="username"></td>
    </tr>
</tbody> <tr>
<td colspan="2" align="center">
<input type="submit" name="submit" value="提交">
<input type="button" onclick="insRow()" value="插入行">
<td>
</tr>
</form>
</table>
back.php文件只是简单用var_dump的打印post数组，但是打印出来的结果只有一行，即第一行添加的数据，后面的数据都没有，请问这是什么问题，谢谢。

Answer 1

要每次添加的文本框的name都不一样才行

Answer 2

php 支持 <input type="text" size="20" name="username[]">获取到 username 是一个数组

Answer 3

用ajax请求，把js动态添加的数据用js做成list<map>格式的如下，ajax的data：getFormData()传递给后台，然后后台根据名字bagScenes获取就行了
// 构建表单数据
  function getFormData(){
          "bagScenes" : getScenes(),
}
 function getScenes(){
     var _returnArray1 = new Array(); 
     //var tb = document.getElementById('tid');    // table 的 id
     var trList1 = $("#sceneList").children(".sceneTr"); 
 
   for ( var i = 0 ; i < trList1.length ; i ++){  
  var _obj1 = {};
  _obj1.sceneIndex=$(trList1[i]).children("td").children("input[name='sceneIndex']").val();
  _obj1.sceneId=$(trList1[i]).children("td").children("input[name='sceneId']").val();
 
  _returnArray1.push(_obj1); 
  } 
 
  var _json1 = JSON.stringify(_returnArray1); 
  return _json1;
 
}

Answer 4

你这格式不规范，把整个table放到form里去吧；你的代码浏览器渲染后重新获得的html是：
    <table id="myTable" border="1">
        <tbody id="tb">
            <form action="back.php" method="post"></form>
            <tr>
                <th>文件路径:</th>
                <td><input type="text" size="20" name="username"></td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" name="submit" value="提交">
                    <input type="button" onclick="insRow()" value="插入行">
                </td>
                <td></td>
            </tr>
        </tbody>
    </table>可以改成：
    <form action="back.php" method="post">
        <table id="myTable" border="1">
            <tbody id="tb">
                <tr>
                    <th>文件路径:</th>
                    <td><input type="text" size="20" name="username"></td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" name="submit" value="提交">
                        <input type="button" onclick="insRow()" value="插入行">
                    </td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </form>

Answer 5

  <form><table id="myTable" border="1">
 <thead>
    <tr>
        <td>文件路径:</td>
        <td><input type="text" size="20" name="username"></td>
    </tr>
</thead>
 <tbody id="tb"></tbody> <tfoot>
    <tr>
    <td colspan="2" align="center">
        <div onclick='sendData'>
        <input type="button" onclick="insRow()" value="插入行">
    <td>
    </tr>
</tfoot>    </table>    </form>
html写成这样比较规范一些。 你点击添加行的时候。往tbody里面添加你准备好的 行格式。剩下的就是js获取你要准备给后台的数据了 获取你要添加行的数据。 （为了方便 我用jquery 啊）比如你添加的数据的格式是
 <tr><td><input type="text" name="addData[]" /></td></tr>
  function getAddRowDatas(){
              let newData=$("input[name='addData']").val()
               return   newData
   }
function sendData(){
     let param={
 newData:getAddRowDatas(),//你新加行的数据
username:$("input[name='username']").val() //你之前已有行的数据
}$.post({
type:"post",
url:"back.php",
data:param,
success:function(data){
conso;e.log("_提交成功后")
}
})}
       
}
这样就可以了。你新增的数据就像你说的一样 是数组的形式。