單擊“編輯”按鈕時，如何使用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”）