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

我在显示数据时遇到麻烦。输入到第一张和第二张表中的任何数据都不会显示，但是输入到第三张表中的任何数据不仅会显示在第三张表中，还会显示在第一张和第二张表中。如何更改此设置，以便可以在每个表中分别显示数据。

这是一个看起来像的例子：




这是我的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)
}

最佳答案

通过在几个不同的地方修改代码来解决您的问题。在当前代码中，由于使用相同的数组索引覆盖了某些值，因此您会得到混乱的结果。为了确保它不冲突，我建议使用multidimensional arrays。一些变化：

1.第一个表包含多个索引：

添加了附加的[0]索引。这应该适用于所有输入，而不仅仅是purchase_minimum

<input type="text" id="rebate_tables" data-name="purchase_minimum" name="rows[0][0][purchase_minimum]">

在第二个表中，我们执行相同的操作，但写的是[1]而不是第一个表中的[0]（下一个索引按递增顺序）：

<input type="text" id="rebate_tables" data-name="purchase_minimum" name="rows[1][0][purchase_minimum]">

在第三张表中，我们将有[2]：

<input type="text" id="rebate_tables" data-name="purchase_minimum" name="rows[2][0][purchase_minimum]">

同样，重要的是使最后的索引（单词）不带数字（而不是像您这样的purchase_minimum1，请使用purchase_minimum）。

2.在JavaScript中，我们做同样的事情，第二个索引应该是len - 1而不是len，因为否则它将变为0、2、3、4 ...

对于第一张桌子：

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

对于第二张桌子，我们将有：

inputs[i].name = 'rows[1][' + (len - 1) + '][' + inputs[i].dataset.name + ']';

第三：

inputs[i].name = 'rows[2][' + (len - 1) + '][' + inputs[i].dataset.name + ']';

3.在您的确认页面中，我们仅在所有区域中更改foreach：

将会：

foreach($_POST['rows'][0] as $row):

代替：

foreach($_POST['rows'] as $row):

另外，在每个foreach中，您还必须删除（字符串）索引中的那些相同的附加数字，例如：

<td><?php echo $row['purchase_minimum']; ?></td>

让我知道我是否错过任何事情，但仍然无法正常工作。