在 Jquery 中获取 TD 的值

Get value of TD in Jquery

本文关键字:TD 的值 获取 Jquery      更新时间:2023-09-26

我的页面上有多个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"))
});

演示