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

在任何HTML文档中，ID都应该是唯一的。您可以使用类来表示身份。将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);
});

BTW方式，$(this)代表了参与该事件的元素，在本例中为update button。

Answer 3

我建议您将db_id值传递给data-属性，可能名为data-db-id。由于每个<tr>代表一条记录，因此请在每个data-db-id元素上放置<tr>属性。然后使用jQuery，使用.data method：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>

请注意一些变化：

此示例使用short PHP echo syntax（<?= $foo ?>）。
此处使用事件委托。 Read more here.
正如其他人已经说过的那样，请保持您的id属性值唯一。（即，将循环中的id="btn_update"切换为“class =＆＃34; btn_update＆＃34;）

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

3 个答案: