单击行中的按钮时获取 HTML TR 的元素
Get elements of HTML TR when a button in the row is clicked
我有以下动态 HTML行。
<tr role="row" class="odd">
<td contenteditable="false" class="sorting_1"> </td>
<td contenteditable="false"> <span class="name">Alex Nilson </span></td>
<td contenteditable="false"><span class="price"> 1234 </span></td>
<td contenteditable="false"> <span class="qty" >1234 </span></td>
<td><button class="pr_edit" href="javascript:;"> Edit </button></td>
<td><button class="pr_elete" href="javascript:;"> Delete </button></td>
</tr>
单击编辑按钮时,我需要将该特定行的单元格元素的值作为JS变量获取到jQuery中,我可以将其AJAX POST发送到另一个PHP页面以插入到数据库中。我试图像下面这样做,但它没有成功。
$(document).ready(function () {
$('.pr_edit').click(function () {
var currentTD = $(this).parents('tr').find('td');
$.each(currentTD, function () {
var iname = $(this).find("span.name").html();
var iprice = $(this).find("span.price").val();
var iqty=$(this).find("span.qty").val();
});
它没有像我想要的那样捕获变量。我如何实现这一点?我需要将这些 SPAN 数据获取到三个变量。
您需要对动态生成的元素进行事件委托,并使用text()
而不是val()
来获取span
的内容。也使用closest('tr')
来获取父tr
,你不需要使用每个。
$(document).ready(function () {
$('body').on('click', '.pr_edit', function () {
var currentTR = $(this).closest('tr');
var iname = currentTR.find("span.name").text();
var iprice = currentTR.find("span.price").text();
var iqty = currentTR.find("span.qty").text();
});
});
如果你想使用动态数据和jQuery,你需要动态地绑定你的click-event。相反:
$('.pr_edit').click(function () {
//magic
}
做
$('.pr_edit').on('click', function () {
//magic
}
但是,如果即使整个表都是动态加载的,则必须有一个"allways"元素作为参考。
$('html, body').on('click', '.pr_edit', function () {
//magic
}
查看此参考:http://api.jquery.com/on/
相关文章:
- 使用Razor/C#循环浏览HTML表以获得每个<tr>
- 使用'从HTML表中提取行的内容<tr onclick=alertContents()>'
- jQuery将输入集中在下一个tr->td时,td包含一个输入字段,但从不关注html选择
- 访问特定<td>对于给定<tr>以及更改html
- 有没有任何方法可以将json对象存储在HTML标记的默认/自定义属性中,比如<tr>
- document.createElement(“tr”)未显示在html中
- 使用 JavaScript 删除 HTML 中的表 tr
- 单击行中的按钮时获取 HTML TR 的元素
- 在 HTML 表中循环并获取每个 tr 的每个 TD 的值
- 用js隐藏HTML表行<tr>从而不占用空间
- javascript查找html<tr>具有类并且具有嵌套<td>
- 仅当td在特定html标记后不包含任何内容时,才隐藏tr
- 如何在html中使TR/TD不可移动
- 克隆html TR并不是克隆所有单元格值
- 将tr添加到table中使用javascript将一个新的tbody添加到html表中
- 如何在其他tr标记之前插入tr.html()内容
- 改变一个tr (HTML/JQUERY)的多个类
- 从HTML/PHP中动态生成的tr元素中获取Id
- 得到<tr>在html表中
- 改变& lt; tr>bgcolor基于
's出现在HTML与CSS的计数