동적 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> 

이 각 테이블에 대해 자바 스크립트를하고 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 확인 페이지입니다 :

,369을

<?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 코드에는 큰 문제가 있습니다. 여러 요소의 ID가 동일합니다. ID는 고유해야합니다. 각 테이블은 다른 테이블과 다른 ID를 가져야합니다. 각 입력은 다른 입력과 다른 ID를 가져야합니다.