Javascript 当单击edit按钮时，如何使用jquery从循环表的每一行传递id？

我有一个表，其中显示了我数据库中的所有数据，并且我在每一行上为“编辑”按钮添加了一个新的列，这样，当用户单击某个他想要更新的按钮时，就会更新我数据库中的数据

我使用以下代码循环浏览数据，并在我的页面中以表格格式显示：

<!--############## TABLE HEADER ##############-->
<thead>
<tr>
    <th>Dummy ID</th>
    <th>Date</th>
    <th>NCA Balances</th>
    <th>Account</th>
    <!-- Update Button on each row -->
    <th style="text-align:center;">Update</th>
</tr>
</thead>
<!--##########################################-->

<!--############# TABLE CONTENT ##############-->
<tbody>
<?php
    $s1 = mysql_query("SELECT * FROM nca_totals");
    while($row = mysql_fetch_array($s4)) {
        $db_id      = $row['total_id'];
        $db_date    = $row['nca_date'];
        $db_balance = $row['nca_total'];
        $db_account = $row['account_type'];
?>

<tr>
    <!-- Input fields to be hidden just to get the ID value -->
    <td><input type="text" id="total_id" value="<?php echo $db_id ?>"></td>

    <td><?php echo $db_date ?></td>
    <td><?php echo number_format($db_balance,2) ?></td>
    <td><?php echo $db_account ?></td>
    <td style="text-align:center;">
        <button type="button" id="btn-update">Update</button>
    </td>
</tr>  
<?php } ?>
</tbody>
<!--##########################################-->

---

当我单击第一行上的第一个按钮时，它从我的表中获取ID。但是在下一行和另一行中，没有ID被传递到我的jquery中。它不会从我的虚拟文本框中获取任何值。请帮我改进代码。任何帮助都将不胜感激。谢谢

您将同一ID共享给多个输入，这会造成问题！我认为您最好使用一个类，或者删除它

<tr>
    <!-- Input fields to be hidden just to get the ID value -->
    <td><input type="text" class="total_id" value="<?php echo $db_id ?>"></td>

    <td><?php echo $db_date ?></td>
    <td><?php echo number_format($db_balance,2) ?></td>
    <td><?php echo $db_account ?></td>
    <td style="text-align:center;">
        <button type="button" class="btn-update">Update</button>
    </td>
</tr>



$(".btn-update").click(function(){
    var total_id = $(this).closest('tr').find('.total_id').val();
        alert(total_id);
});

Id在任何HTML文档中都应该是唯一的。您可以使用类来表示标识。将
id=“total\u id”
更改为
class=“total\u id”
。和
id=“btn update”
到
class=“btn update”

然后，使用此代码从总id输入中获取值

$(".btn-update").click(function(){
    var total_id = $(this).parent().parent().find(".total_id").val();
    alert(total_id);
});

顺便说一句，
$（this）
表示正在进行事件的元素，在本例中，
更新按钮
我建议您将
db\u id
值传递给
数据-
属性，该属性可能命名为
数据db id
。由于每个
表示一条记录，因此在每个
元素上放置
数据db id
属性。然后使用jQuery，检索
data-
属性的值，并使用：
var id=$（this.data（'db-id'）
）。请参见下面的完整示例：

<?php
    $s1 = mysql_query("SELECT * FROM nca_totals");
    while($row = mysql_fetch_array($s4)) {
        $db_id      = $row['total_id'];
        $db_date    = $row['nca_date'];
        $db_balance = $row['nca_total'];
        $db_account = $row['account_type'];
?>

<tr data-db-id="<?= $db_id ?>">
    <td><?= $db_date ?></td>
    <td><?= number_format($db_balance,2) ?></td>
    <td><?= $db_account ?></td>
    <td style="text-align:center;">
        <button class="btn-update">Update</button>
    </td>
</tr>  
<?php } ?>
</tbody>

<script>
  $('table').on('click', '.btn-update', function() {
    var id = $(this).closest('tr').data('db-id');
    // do something with the id....
  });
</script>


）
这里使用事件委托
正如其他人已经说过的，保持
id
属性值的唯一性。（即，将循环中的
id=“btn\u update”
切换到`class=“btn\u update”）
是的，您可以设置一个激励ID，但我们非常鼓励您使用类。这就是它的用途。
<?php
    $s1 = mysql_query("SELECT * FROM nca_totals");
    while($row = mysql_fetch_array($s4)) {
        $db_id      = $row['total_id'];
        $db_date    = $row['nca_date'];
        $db_balance = $row['nca_total'];
        $db_account = $row['account_type'];
?>

<tr data-db-id="<?= $db_id ?>">
    <td><?= $db_date ?></td>
    <td><?= number_format($db_balance,2) ?></td>
    <td><?= $db_account ?></td>
    <td style="text-align:center;">
        <button class="btn-update">Update</button>
    </td>
</tr>  
<?php } ?>
</tbody>

<script>
  $('table').on('click', '.btn-update', function() {
    var id = $(this).closest('tr').data('db-id');
    // do something with the id....
  });
</script>