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    lt tr  id  TEST1   gt       lt td align  left  valign  middle  gt           lt div align  right  gt Contact lt  div gt       lt  td gt       lt td colspan  4  align  left  valign  middle  gt           lt input type  text  id  contact1  size  20    gt   Number           lt input type  text  id  number1  size  20    gt        lt  td gt       lt td gt           lt input type  button   value  Button 1  id  contact1    gt       lt  td gt   lt  tr gt   lt tr id  TEST2   gt       lt td align  left  valign  middle  gt           lt div align  right  gt Contact lt  div gt       lt  td gt       lt td colspan  4  align  left  valign  middle  gt           lt input type  text  id  contact2  size  20    gt   Number           lt input type  text  id  number2  size  20    gt        lt  td gt       lt td gt           lt input type  button   value  Button 1   id  contact2    gt       lt  td gt   lt  tr gt   lt tr id  TEST3   gt       lt td align  left  valign  middle  gt           lt div align  right  gt Contact lt  div gt       lt  td gt       lt td colspan  4  align  left  valign  middle  gt           lt input type  text  id  contact3  size  20    gt   Number           lt input type  text  id  number3  size  20    gt        lt  td gt       lt td gt           lt input type  button   value  Button 1   id  contact2    gt       lt  td gt   lt  tr gt    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

User · Answer

This    lt table id  test  gt         lt tr  id  TEST1   gt             lt td align  left  valign  middle  gt  lt div align  right  gt Contact lt  div gt  lt  td gt             lt td colspan  4  align  left  valign  middle  gt             lt input type  text  id  contact1  size  20    gt   Number             lt input type  text  id  number1  size  20    gt              lt  td gt             lt td gt             lt input type  button   value  Button 1  id  contact1    gt  lt  td gt         lt  tr gt           lt tr id  TEST2   gt             lt td align  left  valign  middle  gt  lt div align  right  gt Contact lt  div gt  lt  td gt             lt td colspan  4  align  left  valign  middle  gt             lt input type  text  id  contact2  size  20    gt   Number             lt input type  text  id  number2  size  20    gt              lt  td gt             lt td gt             lt input type  button   value  Button 1   id  contact2    gt             lt  td gt          lt  tr gt          lt tr id  TEST3   gt             lt td align  left  valign  middle  gt  lt div align  right  gt Contact lt  div gt  lt  td gt             lt td colspan  4  align  left  valign  middle  gt             lt input type  text  id  contact3  size  20    gt   Number             lt input type  text  id  number3  size  20    gt              lt  td gt             lt td gt             lt input type  button   value  Button 1   id  contact2    gt             lt  td gt    lt  tr gt      and javascript     function       var bid  trid        test tr   click function            trid     this  attr  id       table row ID         alert trid                It worked here

User · Answer

Create a class in css name it  buttoncontact  add the class attribute to your buttons  function ClickedRow           document  on  click     buttoncontact   function              var row     this  parents  tr   attr  id            var rowtext     this  closest  tr   text            alert row

User · Answer

Your code would be more like so      tr input type button    click function        id     this  closest  tr   attr  id

User · Answer

input type button     click function        var bid   jQuery this  attr  id       button ID     var trid     this  parents  tr first   attr  id       table row ID

User · Answer

tblCart tr   click function              var tr id     this  attr  id             alert tr id                lt table class  table table-striped table-bordered table-hover  id  tblCart  cellspacing  0  align  center   gt                   lt tr gt                       lt th gt                           Html DisplayNameFor model   gt  model Item ItemName                       lt  th gt                       lt th gt                           Html DisplayNameFor model   gt  model Price PriceAmount                       lt  th gt                       lt th gt                           Html DisplayNameFor model   gt  model Quantity                       lt  th gt                       lt th gt                           Html DisplayNameFor model   gt  model Subtotal                       lt  th gt                       lt th gt  lt  th gt                   lt  tr gt                   if  cart    null                                      foreach  var vm in cart                                            lt tr id   vm Id  gt                           lt td gt                               Html DisplayFor modelItem   gt  vm Item ItemName                           lt  td gt                           lt td gt                               Html DisplayFor modelItem   gt  vm Price PriceAmount                           lt  td gt                           lt td gt                               Html DisplayFor modelItem   gt  vm Quantity                           lt  td gt                           lt td gt                               Html DisplayFor modelItem   gt  vm Subtotal                           lt  td gt                           lt td  gt                                                           lt span style  width 80px  text-align center   class  glyphicon glyphicon-minus-sign    gt                                                   lt  td gt                       lt  tr gt                                                       lt  table gt

User · Answer

You can use  closest   to get up to the current  lt tr gt  parent  like this      input type button     click function        var bid   this id     button ID     var trid     this  closest  tr   attr  id       table row ID

User · Answer

lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN  gt    lt html gt   lt head gt       lt title gt Untitled lt  title gt    lt script type  text javascript  gt  lt  --  function getVal e        var targ      if   e  var e   window event      if  e target  targ   e target      else if  e srcElement  targ   e srcElement      if  targ nodeType    3     defeat Safari bug         targ   targ parentNode       alert targ innerHTML      onload   function         var t   document getElementById  main   getElementsByTagName  td        for   var i   0  i  lt  t length  i             t i  onclick   getVal      lt  script gt      lt body gt    lt table id  main  gt  lt tr gt       lt td gt 1 lt  td gt       lt td gt 2 lt  td gt       lt td gt 3 lt  td gt       lt td gt 4 lt  td gt   lt  tr gt  lt tr gt       lt td gt 5 lt  td gt       lt td gt 6 lt  td gt       lt td gt 7 lt  td gt       lt td gt 8 lt  td gt   lt  tr gt  lt tr gt       lt td gt 9 lt  td gt       lt td gt 10 lt  td gt       lt td gt 11 lt  td gt       lt td gt 12 lt  td gt   lt  tr gt  lt  table gt    lt  body gt   lt  html gt

User · Answer

First  your jQuery will not work at all unless you enclose all your trs and tds in a table    lt table gt       lt tr gt     lt  tr gt           lt  table gt    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

[jquery] Get the Id of current table row with Jquery

Examples related to jquery

Examples related to html