How to select td of the table with javascript

Question

I know this is very easy question  but I couldn t find the answer anywhere  Only answers are the ones using jQuery  not pure JS  I ve tried the code below and it doesn t work  I don t know why    var t   document getElementById  table        d   t getElementsByTagName  tr        r   d getElementsByTagName  td      This also doesn t work   var t   document getElementById  table        d   t getElementsByTagName  tr        r   d childNodes    What am I doing wrong  What is the best way to do this   EDIT  I indeed have the id of my table table  Preety silly I know  This is how my HTML looks    lt table id  table  gt               lt tr gt                   lt td id  c1  gt 1 lt  td gt                   lt td id  c2  gt 2 lt  td gt                   lt td id  c3  gt 3 lt  td gt               lt  tr gt               lt tr gt                   lt td id  b1  gt 4 lt  td gt                   lt td id  b2  gt 5 lt  td gt                   lt td id  b3  gt 6 lt  td gt               lt  tr gt               lt tr gt                   lt td id  a1  gt 7 lt  td gt                   lt td id  a2  gt 8 lt  td gt                   lt td id  a3  gt 9 lt  td gt               lt  tr gt   lt  table gt    To explain my intentions more clearly   I wish to make a tic tac toe game  For starters  I wish to click on the  lt  td   and be able extract the id of that particular  lt  td    How to do it most efficiently

User · Answer

There are also the rows and cells members   var t   document getElementById  tbl    for  var r   0  r  lt  t rows length  r          for  var c   0  c  lt  t rows r  cells length  c              alert t rows r  cells c  innerHTML

User · Answer

There begin to appear some answers that assume you want to get all  lt td gt  elements from  table  If so  the simplest cross-browser way how to do this is document getElementById  table   getElementsByTagName  td    This works because getElementsByTagName doesn t return only immediate children  No loops are needed

User · Answer

This d   t getElementsByTagName  tr   and this r   d getElementsByTagName  td   are both arrays  The getElementsByTagName returns an collection of elements even if there s just one found on your match   So you have to use like this   var t   document getElementById  table       This have to be the ID of your table  not the tag     d   t getElementsByTagName  tr   0       r   d getElementsByTagName  td   0     Place the index of the array as you want to access the objects   Note that getElementById as the name says just get the element with matched id  so your table have to be like  lt table id  table  gt  and getElementsByTagName gets by the tag   EDIT    Well  continuing this post  I think you can do this   var t   document getElementById  table    var trs   t getElementsByTagName  tr    var tds   null   for  var i 0  i lt trs length  i          tds   trs i  getElementsByTagName  td        for  var n 0  n lt tds length n                  tds n  onclick function     alert this innerHTML               Try it

User · Answer

try document querySelectorAll   table td

User · Answer

There are a lot of ways to accomplish this  and this is but one of them      table   find  tbody td   eq 0  children   first

User · Answer

var t   document getElementById  table        d   t getElementsByTagName  tr        r   d getElementsByTagName  td      needs to be   var t   document getElementById  table        tableRows   t getElementsByTagName  tr        r       i  len  tds  j  jlen   for   i  0  len   tableRows length  i lt len  i          tds   tableRows i  getElementsByTagName  td        for  j   0  jlen   tds length  j  lt  jlen  j              r push tds j              Because getElementsByTagName returns a NodeList an Array-like structure  So you need to loop through the return nodes and then populate you r like above

[javascript] How to select <td> of the <table> with javascript?

Examples related to javascript

Examples related to html-table

Examples related to parent-child