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

Question

I am having trouble with the way my data is being displayed. Any data that is entered into the first and second tables will not be displayed, but anything entered into the 3rd table will be displayed in not only the 3rd table, but the first and second as well. How can I change this so the data can be displayed in each table separately.

Here is an example of what it looks like:

Here is my HTML/PHP related code:

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

Here is some of my Javascript code:

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

Solved your issue by modifying your code in several different places. In your current code, you get chaotic results because you're overwriting some values by using same array index. In order to make sure it does not conflict, I would suggest to use multidimensional arrays. A few changes:

1. First table contains multiple indexes:

Added an additional [0] index. This should apply to all inputs, not just purchase_minimum

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

In second table we do the same but write [1] instead of [0] as in the first table (next index with increasing order):

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

And in the third table we will have [2]:

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

Also, it's important to make last indexes (words) without a number (instead of purchase_minimum1 like in your case, use purchase_minimum).

2. In JavaScript we do the same thing + second index should be len - 1 instead of len because otherwise would go 0, 2, 3, 4, ...

For 1st table:

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

For 2nd table we will have:

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

And in the third:

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

3. In your confirmation page we change only foreach in all areas:

Would be:

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

Instead of:

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

Also, in each foreach you'll have to remove those same additional numbers in (string) indexes, like:

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

Let me know if I missed anything and it's still not working.