在 Jquery 中获取 TD 的值
Get value of TD in Jquery
我的页面上有多个tr
,其中会tds
。现在每个tr都有一个td,我想在单击链接时获得bd_cl
的值bd_cl
.HTML
<tr>
<td>121</td>
<td>111</td>
<td>11</td>
<td bd_cl="PE">Address</td>
<td>
<a class="edit" title="Edit User" onclick="update(this)" href="javascript:void(0);"><img border="0" src="/icon_edit.gif"></a>
</td>
</tr>
<tr>
<td>121</td>
<td>111</td>
<td>11</td>
<td bd_cl="AD">Name</td>
<td>
<a class="edit" title="Edit User" onclick="update(this)" href="javascript:void(0);"><img border="0" src="/icon_edit.gif"></a>
</td>
</tr>
jQuery
function uodate (objref){
var $parenttrobj = $(objref).closest('tr');
alert($parenttrobj.attr("bd_cl").val());
}
但是我无法获得值.请帮我解决这个问题
您有错误的选择器来定位单击的锚元素父级上一个 td 元素。 使用正确的选择器以及.attr("bd_cl")
来获取值:
function update (objref){
var $parenttdobj = $(objref).parent();
alert($parenttdobj.prev().attr("bd_cl"));
}
工作演示
您可以使用
以下代码
$('td').each(function(){
if($(this).hasAttr('bd_cl')){
alert($(this).text());
}
});
在
jquery中使用find
var $parenttrobj = $(objref).closest('tr');
alert($parenttrobj.find("td").attr("bd_cl"));
您的函数名称中有拼写错误。此外,您错过了table
标签。
如果要获取属性值,只需使用.attr('bd_cl')
function update (objref){
var $parenttrobj = $(objref).closest('tr').find('td[bd_cl]');
alert($parenttrobj.attr("bd_cl"));
}
如果要获取td
内容:
function update (objref){
var $parenttrobj = $(objref).closest('tr').find('td[bd_cl]');
alert($parenttrobj.text());
}
function update(el) {
var td = $(el).parent().prev();
alert(td.attr('bd_cl'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>121</td>
<td>111</td>
<td>11</td>
<td bd_cl="PE">Address</td>
<td>
<a class="edit" title="Edit User" onclick="update(this)" href="javascript:void(0);"><img border="0" src="//placehold.it/32x32"></a>
</td>
</tr>
<tr>
<td>121</td>
<td>111</td>
<td>11</td>
<td bd_cl="AD">Name</td>
<td>
<a class="edit" title="Edit User" onclick="update(this)" href="javascript:void(0);"><img border="0" src="//placehold.it/32x32"></a>
</td>
</tr>
</table>
我建议稍微修改一下你的方法,以摆脱内联事件处理程序,使用 jQuery 来分配点击处理函数:
function update() {
// 'this' here is the element that was interacted with
// at the point of event-handling being assigned.
// find the closest ancestor <tr> element,
// find the the <td> elements that have a 'bd_cl' attribute:
var cell = $(this).closest('tr').find('td[bd_cl]');
// use console.log() rather than 'alert' to log the retrieved text:
console.log(cell.text());
}
// adds a click-handling function to the <a class="edit"> elements
// that are within <td> elements. jQuery will pass the clicked
// element to the assigned function as 'this':
$('td a.edit').on('click', update);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>121</td>
<td>111</td>
<td>11</td>
<td bd_cl="PE">Address</td>
<td>
<a class="edit" title="Edit User" href="#">
<img border="0" src="/icon_edit.gif">
</a>
</td>
</tr>
<tr>
<td>121</td>
<td>111</td>
<td>11</td>
<td bd_cl="AD">Name</td>
<td>
<a class="edit" title="Edit User" href="#">
<img border="0" src="/icon_edit.gif">
</a>
</td>
</tr>
</tbody>
</table>
当您尝试查找包含在 <td>
元素(显然不是 <input />
或 <select>
元素)中的文本时,它没有可用的val()
方法;而是必须使用text()
。
此外,虽然这将起作用,但值得指出的是,由于您使用的自定义属性,您的 HTML 是无效的。但是,在HTML 5下,您可以访问有效的data-*
自定义属性,这些属性将在HTML 5文档类型(<doctype html>
)下进行验证,尽管它与HTML 4.x一样无效(尽管向后兼容)。因此,要使用data-*
属性:
function update() {
var cell = $(this).closest('tr').find('td[data-bd_cl]');
console.log(cell.text());
}
$('td a.edit').on('click', update);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>121</td>
<td>111</td>
<td>11</td>
<td data-bd_cl="PE">Address</td>
<td>
<a class="edit" title="Edit User" href="#">
<img border="0" src="/icon_edit.gif">
</a>
</td>
</tr>
<tr>
<td>121</td>
<td>111</td>
<td>11</td>
<td data-bd_cl="AD">Name</td>
<td>
<a class="edit" title="Edit User" href="#">
<img border="0" src="/icon_edit.gif">
</a>
</td>
</tr>
</tbody>
</table>
引用:
-
closest()
. -
find()
. - 具有属性 (
[attribute]
) 选择器。 -
on()
. -
text()
.
试试
$(".edit").click(function update() {
$parenttrobj = $(this).closest('tr');
alert($parenttrobj.find("[bd_cl]").attr("bd_cl"))
});
演示
相关文章:
- 在同一tr-jQuery中获取td的值
- 如何通过Javascript更改以前TD中的值
- 我想在 td 的值发生变化时更改突出显示的 td
- 无法动态设置表的 td 元素的值
- 如何在MVC中点击时获取TD的值
- 根据数据库中的值更改 td 单元格的颜色
- 如何使用 Jquery 将字段中的值设置为表 td
- 在 foreach 循环中获取 TD 的值
- jQuery 获取表中 td 的值
- 如何使用 JQuery 获取表的第一个 td 的值
- 如何在 JavaScript 或 jQuery 中获取 TD 的值
- 在 HTML 表中循环并获取每个 tr 的每个 TD 的值
- 在 Jquery 中获取 TD 的值
- 如何使用类名获取最接近的 TD 的值
- 访问表中的 td 内部值
- 如何使用C#读取TD的值
- 如何在javascript中获取列表中td的值
- 如何在特定的tr中找到td的值
- 如何使用jquery获取td的值
- 如何检查表td的值