CODEWITHSUNDEEP
javascriptjquery
Developer
Developer

Reputation: 6350

Get value of TD in Jquery

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

Upvotes: 1

Views: 125

Answers (6)

Balachandran
Balachandran

Reputation: 9637

try

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

DEMO

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 0

vp_arth
vp_arth

Reputation: 14982

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>

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

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

Upvotes: 1

Sudharsan S
Sudharsan S

Reputation: 15393

use find in jquery

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

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

Upvotes: 0

Manish Jangir
Manish Jangir

Reputation: 5437

You can use the following code

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

Upvotes: 0

Related Questions