javascript - 以 HTML 形式复制到其他动态表的数据

Question

我的数据显示方式有问题。输入到第一个和第二个表中的任何数据都不会显示，但是输入到第 3 个表中的任何数据不仅会显示在第 3 个表中，还会显示在第一个和第二个表中。我该如何更改它，以便数据可以分别显示在每个表中。

这是它的外观示例:

这是我的 HTML/PHP 相关代码:

<p>
<div class="border1">
<div id="rebate_400p">
<strong>400P</strong><br>
</div>

<?php if(isset($_POST['rows'])): ?>
    <table cellspacing="20">
        <tr align="center" class="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; ?>
</div>
</p>

<!-- 400M -->
<p>
<div class="border1">
<div id="rebate_400m">
<strong>400M</strong><br>
</div>

<?php if(isset($_POST['rows'])): ?>
    <table cellspacing="20">
        <tr align="center" class="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; ?>
</div>
</p>

<!-- 400D -->
<p>
<div class="border1">
<div id="rebate_400d">
<strong>400D</strong><br>
</div>

<?php if(isset($_POST['rows'])): ?>
    <table cellspacing="20">
        <tr align="center" class="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; ?>
</div>
</p>

这是我的一些 Javascript 代码:

// ----- Deletes row for 400p -----
function deleteRow(row)
{
    var i=row.parentNode.parentNode;
    i.parentNode.removeChild(i);
}

// ----- Adds row for 400p -----
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)
}

// ----- JS for 400M -----

// ----- Deletes row for 400m -----
function deleteRow1(row)
{
    var i=row.parentNode.parentNode;
    i.parentNode.removeChild(i);
}

// ----- Adds row for 400m -----
function insRow1()
{
  var x=document.getElementById('tables1');
  var new_row1 = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  new_row1.cells[0].innerHTML = len;

  var inp1 = new_row1.cells[1].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  var inp2 = new_row1.cells[2].getElementsByTagName('input')[0];
  inp2.id += len;
  inp2.value = '';

  var inputs = new_row1.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_row1)
}

// ----- JS for 400D -----

// ----- Deletes row for 400d -----
function deleteRow2(row)
{
    var i=row.parentNode.parentNode;
    i.parentNode.removeChild(i);
}

// ----- Adds row to 400d -----
function insRow2()
{
  var x=document.getElementById('tables2');
  var new_row2 = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  new_row2.cells[0].innerHTML = len;

  var inp1 = new_row2.cells[1].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  var inp2 = new_row2.cells[2].getElementsByTagName('input')[0];
  inp2.id += len;
  inp2.value = '';

  var inputs = new_row2.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_row2)
}

Answer 1

我想出了我的问题。在我的 php 代码中，对于每个表，我输入数据的每个文本框都有相同的名称。我更改了每个名称并解决了问题。