在jQuery中获取TD的值

Question

I have multiple tr on my page,that will have tds in that.Now every tr have a td that have bd_cl i want to get the value of bd_cl on click of of the link

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());
}

But i am not able to get the value .Kindly help me in this

Answer 1

You have wrong selector for targeting clicked anchor element parents previous td element. use correct selector along with .attr("bd_cl") to get the value:

function update (objref){
  var $parenttdobj = $(objref).parent();
  alert($parenttdobj.prev().attr("bd_cl"));
}

Working Demo

Answer 2

You can use the following code

$('td').each(function(){
   if($(this).hasAttr('bd_cl')){
      alert($(this).text());
   }
});

Answer 3

You have a typo in your function name. Also, you missed your table tags.

If you are want to get attribute value just use .attr('bd_cl')

function update (objref){
    var $parenttrobj = $(objref).closest('tr').find('td[bd_cl]');
    alert($parenttrobj.attr("bd_cl"));
}

If you are want to get td content:

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> 

Answer 4

try

$(".edit").click(function update() {
    $parenttrobj = $(this).closest('tr');
    alert($parenttrobj.find("[bd_cl]").attr("bd_cl"))
});

DEMO

Answer 5

use find in jquery

var $parenttrobj = $(objref).closest('tr');

alert($parenttrobj.find("td").attr("bd_cl"));

Answer 6

I'd suggest revising your approach, slightly, to move away from the in-line event-handlers, use jQuery to assign click-handling function:

 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> 

As you were trying to find the text contained within a <td> element, noticeably not an <input /> or <select> element, it has no val() method available to it; instead text() must be used.

Further, while this will work, it's worth pointing out that your HTML is invalid, due to the custom attributes you're using. Under HTML 5, however, you have access to valid data-* custom attributes which will validate under the HTML 5 doctype ( <doctype html> ), though it remains just as invalid (albeit backwards compatible) with HTML 4.x. So, to use data-* attributes:

 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> 

References:

• closest() .
• find() .
• Has-attribute ( [attribute] ) selector .
• on() .
• text() .