Get the Id of current table row with Jquery

Question

Hi I have the following code in a form . When the user clicks a button I want to get the current row in order to identify which of the buttons was clicked

          <tr  id="TEST1" >
              <td align="left" valign="middle"><div align="right">Contact</div></td>
              <td colspan="4" align="left" valign="middle">
              <input type="text" id="contact1" size="20" />  Number 
              <input type="text" id="number1" size="20" /> 
              </td>
              <td>
              <input type="button"  value="Button 1" id="contact1" /></td>
          </tr>


          <tr id="TEST2" >
              <td align="left" valign="middle"><div align="right">Contact</div></td>
              <td colspan="4" align="left" valign="middle">
              <input type="text" id="contact2" size="20" />  Number 
              <input type="text" id="number2" size="20" /> 
              </td>
              <td>
              <input type="button"  value="Button 1"  id="contact2" />
              </td> 
          </tr>

          <tr id="TEST3" >
              <td align="left" valign="middle"><div align="right">Contact</div></td>
              <td colspan="4" align="left" valign="middle">
              <input type="text" id="contact3" size="20" />  Number 
              <input type="text" id="number3" size="20" /> 
              </td>
              <td>
              <input type="button"  value="Button 1"  id="contact2" />
              </td> 
          </tr>

I thought the following Jquery would return the ID name but it doesn't

      $('input[type=button]' ).click(function() {
       bid = (this.id) ; // button ID 
       trid = $('tr').attr('id'); // table row ID 
      });

Can anyone give me some advice please ? thanks

Answer 1

You can use .closest() to get up to the current <tr> parent, like this:

$('input[type=button]' ).click(function() {
   var bid = this.id; // button ID 
   var trid = $(this).closest('tr').attr('id'); // table row ID 
 });

Answer 2

Your code would be more like so:

$('tr input[type=button]').click(function(){
    id = $(this).closest('tr').attr('id');
});

Answer 3

$('input[type=button]' ).click(function() {
   var bid = jQuery(this).attr('id'); // button ID 
   var trid = $(this).parents('tr:first').attr('id'); // table row ID 
 });

Answer 4

First, your jQuery will not work at all unless you enclose all your trs and tds in a table:

<table>
    <tr>...</tr>
    ...
</table>

Second, your code gets the id of the first tr of the page, since you select all the trs of the page and get the id of the first one (.attr() returns the attribute of the first element in the set of elements it is used on)

Your current code:

  $('input[type=button]' ).click(function() {
   bid = (this.id) ; // button ID 
   trid = $('tr').attr('id'); // ID of the the first TR on the page
                              // $('tr') selects all trs in the DOM
  });

trid is always TEST1 (jsFiddle)

Instead of selecting all trs on the page with $('tr'), you want to select the first ancestor of the clicked upon input that is a tr. Use .closest() for this in the form $(this).closest('tr').

You can reference the clicked on element as this, make a jQuery object out of it with the form $(this), so you have access to all the jQuery methods on it.

What your code should look like:

  // On DOM ready...
$(function() {

      $('input[type=button]' ).click(function() {

          var bid, trid; // Declare variables. If you don't use var 
                         // you will bind bid and trid 
                         // to the window, since you make them global variables.

          bid = (this.id) ; // button ID 

          trid = $(this).closest('tr').attr('id'); // table row ID 
      });
});

jsFiddle example