動的HTMLテーブルからデータを表示

Question

値を入力できるHTMLフォームがあります。送信をクリックすると、入力した確認ページにデータが表示されます。私は複数行のテキストを表示することに問題がありましたが、それを修正しました。今私は別の問題を抱えています...私は3組のテーブルを持っており、情報が入力されると（特に3番目のテーブルに）、そのデータを他のテーブルにコピーします。

これは、テーブルのHTMLで、3つのテーブルごとに同じに見える：

<table id="tables" cellspacing="5"> 
    <tr align="center" id="table_titles"> 
     <td>Tier</td> 
     <td>Purchase Minimum</td> 
     <td>Multiplier</td> 
     <td>UOM</td> 
     <td>Retro</td> 
     <td>Guaranteed</td> 
     <td>Paid</td> 
     <td>Delete?</td> 
     <td>Add Row</td> 
    </tr> 
    <tr> 
      <td align="center" name="tier">1</td> 
      <td><input type="text" id="rebate_tables" data-name="purchase_minimum" name="rows[0][purchase_minimum]"></td> 
      <td><input type="text" id="rebate_tables" data-name="multiplier" name="rows[0][multiplier]"></td> 
      <td><input type="text" id="rebate_tables" data-name="uom" name="rows[0][uom]"></td> 
      <td><input type="text" id="rebate_tables" data-name="retro" name="rows[0][retro]"></td> 
      <td><input type="text" id="rebate_tables" data-name="guaranteed" name="rows[0][guaranteed]"></td> 
      <td><input type="text" id="rebate_tables" data-name="paid" name="rows[0][paid]"></td> 
      <td><input type="button" id="delRow" value="Delete" onclick="deleteRow(this)"></td> 
      <td><input type="button" id="addmoreRowsbutton" value="Add row" onclick="insRow()"></td> 
     </tr> 
</table> 

これは、各テーブルのJAVASCRIPTで、insRow()以外の他のテーブルのものと非常に似ています別の名前だけでなく、new_rowがあります

function insRow() 
{ 
    var x=document.getElementById('tables'); 
    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('input')[0]; 
    inp1.id += len; 
    inp1.value = ''; 
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0]; 
    inp2.id += len; 
    inp2.value = ''; 

    var inputs = new_row.querySelectorAll('input[type=text]'); 

    for(var i=0;i<inputs.length;i++) 
    { 
     inputs[i].value=''; 
     inputs[i].name='rows[' + len + '][' + inputs[i].dataset.name + ']'; 
    } 

    x.appendChild(new_row) 
} 

そして、これが同じコード持つ各テーブルでのHTML/PHP確認ページである：

を

<?php if(isset($_POST['rows'])): ?> 
    <table id="table" cellspacing="20"> 
     <tr align="center" id="table_row"> 
      <td>Tier</td> 
      <td>Purchase Minimum</td> 
      <td>Multiplier</td> 
      <td>UOM</td> 
      <td>Retro</td> 
      <td>Guaranteed</td> 
      <td>Paid</td> 
     </tr> 
     <?php 
      $count = 1; 
      foreach($_POST['rows'] as $row): 
     ?> 
      <tr align="center"> 
       <td><?php echo $count; ?></td> 
       <td><?php echo $row['purchase_minimum']; ?></td> 
       <td><?php echo $row['multiplier']; ?></td> 
       <td><?php echo $row['uom']; ?></td> 
       <td><?php echo $row['retro']; ?></td> 
       <td><?php echo $row['guaranteed']; ?></td> 
       <td><?php echo $row['paid']; ?></td> 
      </tr> 
     <?php 
      $count++; 
      endforeach; 
     ?> 
    </table> 
<?php endif; ?> 

Answer 1

あなたのhtmlコードには大きな問題があります：いくつかの要素は同じidsを持っています。 IDは一意でなければなりません。各テーブルは、他のテーブルと異なるIDを持つ必要があります。各入力は他の入力とは異なるIDを持つ必要があります。