Javascript 显示动态HTML表中的数据

我有一个可以输入值的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>

这是HTML/PHP确认页面，每个表都有相同的代码：

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

层
最低购买量
倍增器
计量单位
复古的
放心
支付

html代码中存在一个大问题：几个元素具有相同的ID。ID必须是唯一的。每个表必须具有与其他表不同的id。每个输入必须具有不同于其他输入的id。

当对HTML元素使用

id

时，

id

必须是唯一的。好的，我检查了，我的HTML代码中有不同的ID…然而，PHP/HTML中的ID是相同的，但我检查了我的其余代码，我从来没有实际使用过这些ID，所以我不认为这有什么区别。好的，我检查了，我的HTML代码中有不同的ID…但是，PHP/HTML中的ID是相同的，但我检查了代码的其余部分，我从来没有实际使用过这些ID，所以我认为这没有任何区别。@Rataiczak24错了，在您的js

var x=document.getElementById（'tables'）

所以您正在使用这些ID，您不知道选择了哪个表……我修复了所有ID，但不幸的是，我的PHP/HTML确认页面实际上甚至没有使用Javascript，因为确认页面只是从表单中提取数据并显示it@Rataiczak24您仍然选择要插入数据的另一个表，而不是正确的表。函数

insRow（）

应该首先检查哪个表相关，然后选择相关的表，而不是另一个表。。。

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