How to get a table cell value using jQuery

Question

I am trying to work out how to get the value of table cell for each row using jQuery   My table looks like this    lt table id  mytable  gt     lt tr gt       lt th gt Customer Id lt  th gt       lt th gt Result lt  th gt     lt  tr gt     lt tr gt       lt td gt 123 lt  td gt       lt td gt  lt  td gt     lt  tr gt     lt tr gt       lt td gt 456 lt  td gt       lt td gt  lt  td gt     lt  tr gt     lt tr gt       lt td gt 789 lt  td gt       lt td gt  lt  td gt     lt  tr gt   lt  table gt    I basically want to loop through the table  and get the value of the Customer Id column for each row   In the code below I have worked out that I need to do this to get it looping through each row  but I m not sure how to get the value of the first cell in the row       mytable tr   each function         var cutomerId

User · Answer

a less-jquerish approach       mytable tr   each function         if   this rowIndex  return     skip first row     var customerId   this cells 0  innerHTML        this can obviously be changed to work with not-the-first cells

User · Answer

try this     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

mytable tr   each function         var customerId     this  find  td first   html              What you are doing is iterating through all the trs in the table  finding the first td in the current tr in the loop  and extracting its inner html   To select a particular cell  you can reference them with an index       mytable tr   each function         var customerId     this  find  td   eq 2  html              In the above code  I will be retrieving the value of the third row  the index is zero-based  so the first cell index would be 0     Here s how you can do it without jQuery   var table   document getElementById  mytable         rows   table getElementsByTagName  tr        i  j  cells  customerId   for  i   0  j   rows length  i  lt  j    i        cells   rows i  getElementsByTagName  td        if   cells length            continue            customerId   cells 0  innerHTML

User · Answer

mytable tr   each function          need this to skip the first row   if    this  find  td first   length  gt  0        var cutomerId     this  find  td first   html

User · Answer

A working example  http   jsfiddle net 0sgLbynd    lt table gt   lt tr gt       lt td gt 0 lt  td gt       lt td class  ms-vb2  gt 1 lt  td gt       lt td class  ms-vb2  gt 2 lt  td gt       lt td class  ms-vb2  gt 3 lt  td gt       lt td class  ms-vb2  gt 4 lt  td gt       lt td class  ms-vb2  gt 5 lt  td gt       lt td class  ms-vb2  gt 6 lt  td gt   lt  tr gt   lt  table gt      document  ready function        alert  sss       td   each function            alert   this  html           this  html  aaaaaaa

User · Answer

try this     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

a less-jquerish approach       mytable tr   each function         if   this rowIndex  return     skip first row     var customerId   this cells 0  innerHTML        this can obviously be changed to work with not-the-first cells

User · Answer

mytable tr   each function          need this to skip the first row   if    this  find  td first   length  gt  0        var cutomerId     this  find  td first   html

User · Answer

mytable tr   each function         var customerId     this  find  td first   html              What you are doing is iterating through all the trs in the table  finding the first td in the current tr in the loop  and extracting its inner html   To select a particular cell  you can reference them with an index       mytable tr   each function         var customerId     this  find  td   eq 2  html              In the above code  I will be retrieving the value of the third row  the index is zero-based  so the first cell index would be 0     Here s how you can do it without jQuery   var table   document getElementById  mytable         rows   table getElementsByTagName  tr        i  j  cells  customerId   for  i   0  j   rows length  i  lt  j    i        cells   rows i  getElementsByTagName  td        if   cells length            continue            customerId   cells 0  innerHTML

User · Answer

Try this     document  ready function        items   delegate  tr classname    click   function data               alert data target innerHTML    this will show the inner html     alert   this  find  td eq 0    html      this will alert the value in the 1st column

User · Answer

a less-jquerish approach       mytable tr   each function         if   this rowIndex  return     skip first row     var customerId   this cells 0  innerHTML        this can obviously be changed to work with not-the-first cells

User · Answer

Try this     document  ready function        items   delegate  tr classname    click   function data               alert data target innerHTML    this will show the inner html     alert   this  find  td eq 0    html      this will alert the value in the 1st column

User · Answer

mytable tr   each function         var customerId     this  find  td first   html              What you are doing is iterating through all the trs in the table  finding the first td in the current tr in the loop  and extracting its inner html   To select a particular cell  you can reference them with an index       mytable tr   each function         var customerId     this  find  td   eq 2  html              In the above code  I will be retrieving the value of the third row  the index is zero-based  so the first cell index would be 0     Here s how you can do it without jQuery   var table   document getElementById  mytable         rows   table getElementsByTagName  tr        i  j  cells  customerId   for  i   0  j   rows length  i  lt  j    i        cells   rows i  getElementsByTagName  td        if   cells length            continue            customerId   cells 0  innerHTML

User · Answer

If you can  it might be worth using a class attribute on the TD containing the customer ID so you can write       mytable tr   each function         var customerId     this  find   customerIDCell   html               Essentially this is the same as the other solutions  possibly because I copy-pasted   but has the advantage that you won t need to change the structure of your code if you move around the columns  or even put the customer ID into a  lt span gt   provided you keep the class attribute with it   By the way  I think you could do it in one selector       mytable  customerIDCell   each function       alert   this  html           If that makes things easier

User · Answer

mytable tr   each function         var customerId     this  find  td first   html              What you are doing is iterating through all the trs in the table  finding the first td in the current tr in the loop  and extracting its inner html   To select a particular cell  you can reference them with an index       mytable tr   each function         var customerId     this  find  td   eq 2  html              In the above code  I will be retrieving the value of the third row  the index is zero-based  so the first cell index would be 0     Here s how you can do it without jQuery   var table   document getElementById  mytable         rows   table getElementsByTagName  tr        i  j  cells  customerId   for  i   0  j   rows length  i  lt  j    i        cells   rows i  getElementsByTagName  td        if   cells length            continue            customerId   cells 0  innerHTML

User · Answer

A working example  http   jsfiddle net 0sgLbynd    lt table gt   lt tr gt       lt td gt 0 lt  td gt       lt td class  ms-vb2  gt 1 lt  td gt       lt td class  ms-vb2  gt 2 lt  td gt       lt td class  ms-vb2  gt 3 lt  td gt       lt td class  ms-vb2  gt 4 lt  td gt       lt td class  ms-vb2  gt 5 lt  td gt       lt td class  ms-vb2  gt 6 lt  td gt   lt  tr gt   lt  table gt      document  ready function        alert  sss       td   each function            alert   this  html           this  html  aaaaaaa

User · Answer

a less-jquerish approach       mytable tr   each function         if   this rowIndex  return     skip first row     var customerId   this cells 0  innerHTML        this can obviously be changed to work with not-the-first cells

User · Answer

If you can  it might be worth using a class attribute on the TD containing the customer ID so you can write       mytable tr   each function         var customerId     this  find   customerIDCell   html               Essentially this is the same as the other solutions  possibly because I copy-pasted   but has the advantage that you won t need to change the structure of your code if you move around the columns  or even put the customer ID into a  lt span gt   provided you keep the class attribute with it   By the way  I think you could do it in one selector       mytable  customerIDCell   each function       alert   this  html           If that makes things easier

User · Answer

This works    document  ready function         for  var row   0  row  lt  3  row              for  var col   0  col  lt  3  col                      tbl   children   children   row  children col  innerHTML    H

User · Answer

If you can  it might be worth using a class attribute on the TD containing the customer ID so you can write       mytable tr   each function         var customerId     this  find   customerIDCell   html               Essentially this is the same as the other solutions  possibly because I copy-pasted   but has the advantage that you won t need to change the structure of your code if you move around the columns  or even put the customer ID into a  lt span gt   provided you keep the class attribute with it   By the way  I think you could do it in one selector       mytable  customerIDCell   each function       alert   this  html           If that makes things easier

User · Answer

If you can  it might be worth using a class attribute on the TD containing the customer ID so you can write       mytable tr   each function         var customerId     this  find   customerIDCell   html               Essentially this is the same as the other solutions  possibly because I copy-pasted   but has the advantage that you won t need to change the structure of your code if you move around the columns  or even put the customer ID into a  lt span gt   provided you keep the class attribute with it   By the way  I think you could do it in one selector       mytable  customerIDCell   each function       alert   this  html           If that makes things easier

User · Answer

mytable tr   each function          need this to skip the first row   if    this  find  td first   length  gt  0        var cutomerId     this  find  td first   html

User · Answer

mytable tr   each function          need this to skip the first row   if    this  find  td first   length  gt  0        var cutomerId     this  find  td first   html

User · Answer

document  ready function          var customerId          mytable td   click function          alert   this  html

User · Answer

This works    document  ready function         for  var row   0  row  lt  3  row              for  var col   0  col  lt  3  col                      tbl   children   children   row  children col  innerHTML    H

User · Answer

document  ready function          var customerId          mytable td   click function          alert   this  html

[jquery] How to get a table cell value using jQuery?

Examples related to jquery