Anzeigen von Daten aus dynamischer HTML-Tabelle

Question

Ich habe ein HTML-Formular, in das Sie Werte eingeben können. Sie können auf "Senden" klicken, dann werden die Daten auf einer Bestätigungsseite angezeigt, die Sie eingegeben haben. Ich hatte Probleme mit der Anzeige mehrerer Textzeilen, aber das wurde behoben. Jetzt habe ich ein anderes Problem ... Ich habe 3 Sätze von Tabellen und wenn Informationen eingegeben werden (speziell in der 3. Tabelle), kopiert es diese Daten in die andere Tabelle ... wie kann das behoben werden ??

Dies ist der HTML-Code für den Tisch und sieht gleich für jede der drei Tabellen:

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

Dies ist die JAVASCRIPT für jede Tabelle und ist extrem ähnlich derjenigen der anderen Tabellen mit Ausnahme der insRow() auch einen anderen Namen als die 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) 
} 

Und das ist die HTML/PHP-Bestätigungsseite mit jeder Tabelle den gleichen Code mit:

<?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

Es gibt ein großes Problem in Ihrem HTML-Code: mehrere Elemente haben die gleichen IDs. IDs müssen eindeutig sein. Jede Tabelle muss eine andere ID als die anderen Tabellen haben. Jede Eingabe muss eine andere ID als die anderen haben.