单击编辑按钮时,如何使用 jquery 从循环表的每一行传递 id
How to pass the id from each row of a loop table using jquery when edit button is click?
我有一个显示数据库中所有数据的表,我在每行上都添加了一个新的编辑列按钮,以便在用户单击他想要更新的某个按钮时更新数据库中的数据。
我有以下代码来循环浏览数据并以表格格式显示在我的页面中:
<!--############## 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 中。它没有从我的虚拟文本框中获得任何值。请帮助我改进我的代码。任何帮助将不胜感激。谢谢
您正在将相同的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_id"
更改为class="total_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)
表示正在接受事件的元素,在本例中为 update button
.
我建议您将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>
请注意一些更改:
- 此示例使用简短的 PHP echo 语法 (
<?= $foo ?>
)。 - 此处使用事件委派。 在此处阅读更多内容。
- 正如其他人已经说过的那样,保持
id
属性值的唯一性。(即,将循环中的id="btn_update"
切换到"class="btn_update")
相关文章:
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 在追加一行并调用其中的时差函数时生成动态id
- 使用setAttribute将id设置为元素最后一行的td
- 单击编辑按钮时,如何使用 jquery 从循环表的每一行传递 id
- 在一行中使用克隆功能后,如何为每行创建不同的ID
- 使用表单中的PHP按钮根据变量ID从MYSQL数据库表中删除一行
- 将 id 从 foreach 循环动态传递到仅申请一行的锚点标签到 jquery,我无法获得其他行的弹出窗口
- 当我点击ImageButton(telerik)时,检索一行的ID
- JavaScript在atable中为唯一id添加另一行,显示id的NAN值
- 隐藏没有class和id属性的html表2的第一行
- Jquery移动到下一行's输入元素的id
- 使用Javascript或Jquery在创建每一行时动态地为表创建递增id
- 使用行id删除一行javascript
- 如何在同一行中显示具有其id的两个tr's
- 我想删除任意一行的id
- 在Javascript中克隆一行时增加元素Id
- 我怎么能从这个字符串和它的子字在一行中得到id
- AngularJS:我该如何根据ID从数组中选择一行
- 如何知道哪一行选择了哪个单选按钮 ID
- 在一行中按ID选择多个元素