如何将Javascript中创建的动态行中的数据获取到html标记中？

有一个表单的表包含1行和4列。添加行按钮创建了一个精确的行，但ID不同。我想获取此表单中填写的数据，并在单击底部的保存并继续稍后按钮时发送到php脚本。我如何做到这一点？这是一个html页面

<form name="myform">

<h3 align="left"><b>Computer</b><h3>
<table id="POITable" border="1" width="100%">
<tr>
<th style="width:10%">Sr No.</th>
<th>Item Description</th>
<th>Quantity</th>
<th>Rate(Inclusive of Taxes)</th>
<th>Total Cost</th>
</tr>
<tr>
<td>1</td>
 <td><textarea rows="4" cols="50" id="comp_item"></textarea></td>
 <td><input size=25 type="number" id="comp_quant"/></td>
  <td><input size=25 type="number" id="comp_rate"/></td>
 <td><input size=25 type="number" id="comp_total"/></td>
  </tr>
  </table>
  Total:<input type="text" name="computer" align="right"><br>
  <input type="button" id="addmorePOIbutton" value="Add New Row" onclick="insRow()"/>

   <script>

   function insRow()
  {
  console.log( 'hi');
  var x=document.getElementById('POITable');
  var new_row = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  new_row.cells[0].innerHTML = len;
  var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
  inp1.id += len;
   inp1.value = '';
  var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
  inp2.id += len;
   inp2.value = '';
  var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
   inp3.id += len;
   inp3.value = '';
   var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
  inp4.id += len;
  inp4.value = '';
   x.appendChild( new_row );
  document.getElementsByName("len")[0].value=len;
   }
   </script>
  <input type="submit" value="SAVE AND CONTINUE LATER">
  </form>

      </html>

电脑类
高级文书主任。
项目说明
量
费率（含税）
总成本
1.
总计：

函数insRow（）
{
console.log（'hi'）；
var x=document.getElementById（'POITable'）；
var new_row=x.rows[1]。克隆节点（true）；
var len=x.rows.length；
新的行。单元格[0]。innerHTML=len；
var inp1=new_row.cells[1].getElementsByTagName（'textarea'）[0]；
inp1.id+=len；
inp1.value=''；
var inp2=new_row.cells[2].getElementsByTagName（'input'）[0]；
inp2.id+=len；
inp2.value=''；
var inp3=new_row.cells[3]。getElementsByTagName（'input'）[0]；
inp3.id+=len；
inp3.value=''；
var inp4=new_row.cells[4].getElementsByTagName（'input'）[0]；
inp4.id+=len；
inp4.value=''；
x、 追加子项（新的_行）；
document.getElementsByName（“len”）[0]。value=len；
}

要在php中检索数据，必须在表单输入字段中添加名称属性。我重写了您的代码，将输入id替换为名称，如下所示：

<td><textarea rows="4" cols="50" name="comp_item"></textarea></td>
<td><input size=25 type="number" name="comp_quant"/></td>
<td><input size=25 type="number" name="comp_rate"/></td>
<td><input size=25 type="number" name="comp_total"/></td>

<form name="myform" action="myphpformhandler.php" method="POST">

<form name="myform" action="myphpformhandler.php" method="POST"> <!-- point action towards the php-file where you wish to handle your data -->

    <h3 align="left"><b>Computer</b><h3>
    <table id="POITable" border="1" width="100%">
      <tr>
        <th style="width:10%">Sr No.</th>
        <th>Item Description</th>
        <th>Quantity</th>
        <th>Rate(Inclusive of Taxes)</th>
        <th>Total Cost</th>
      </tr>
      <tr>
        <td>1</td>
        <td><textarea rows="4" cols="50" name="comp_item"></textarea></td>
        <td><input size=25 type="number" name="comp_quant"/></td>
        <td><input size=25 type="number" name="comp_rate"/></td>
        <td><input size=25 type="number" name="comp_total"/></td>
      </tr>
    </table>
    Total:<input type="text" name="computer" align="right"><br>
    <input type="button" id="addmorePOIbutton" value="Add New Row"/>
    <input type="submit" value="SAVE AND CONTINUE LATER">
  </form>

  <script>

    (function() { // Prevent vars from leaking to the global scope

      var formTable = document.getElementById('POITable');
      var newRowBtn = document.getElementById('addmorePOIbutton');

      newRowBtn.addEventListener('click', insRow, false); //added eventlistener insetad of inline onclick-attribute.

      function insRow() {
        var new_row = formTable.rows[1].cloneNode(true),
        numTableRows = formTable.rows.length;

        // Set the row number in the first cell of the row
        new_row.cells[0].innerHTML = numTableRows;

        var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
        inp1.name += numTableRows;
        inp1.value = '';

        var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
        inp2.name += numTableRows;
        inp2.value = '';

        var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
        inp3.name += numTableRows;
        inp3.value = '';

        var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
        inp4.name += numTableRows;
        inp4.value = '';

        // Append the new row to the table
        formTable.appendChild( new_row );

        document.getElementsByName("len")[0].value = numTableRows;
      }
    })();
  </script>

$_POST['comp_item'];
$_POST['comp_item1'];
$_POST['comp_quant'];
$_POST['comp_quant1']; //etc...