单击“编辑”按钮时，如何使用jquery从循环表的每一行传递id？

Question

我有一个表，该表显示数据库中的所有数据，并且在每行上添加了一个用于编辑按钮的新列，以便当用户单击要更新的特定按钮时，该按钮将更新数据库中的数据。

我有以下代码可以遍历数据并以表格格式显示在页面中：

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

我想在jQuery中使用Ajax，以便当用户单击按钮更新时，不必重新加载页面。 但是首先，我想确认我在每一行上都获得了正确的ID，并将其传递给我的jquery函数，如下所示：

update_nca.js

$(document).ready(function(){
    // Get the values
    $("#btn-update").click(function(){
        var total_id = $("#total_id").val();
        alert(total_id);
    });
});

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

Answer 1

您要向多个输入共享相同的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);
});

Answer 2

ID在任何HTML文档中都应该是唯一的。 您可以使用类来表示身份。 将id="total_id"更改为class="total_id" 。 并将id="btn-update"更改为class="btn-update" 。

然后，使用此代码从total-id输入获取值。

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

顺便说一句， $(this)表示接受事件的元素，在本例中为update button 。

Answer 3

我建议你通过db_id值的data-属性，或者叫data-db-id 。 由于每个<tr>代表一条记录，因此将data-db-id属性放在每个<tr>元素上。 然后使用jQuery，使用.data方法检索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>

注意一些变化：

1. 本示例使用简短的PHP回显语法 （ <?= $foo ?> ）。
2. 这里使用事件委托。 在这里阅读更多。
3. 正如其他人已经说过的，请保持您的id属性值唯一。 （即，将循环中的id="btn_update"切换为`class =“ btn_update”）