Count number of columns in a table row

Question

I have a table similar to    lt table id  table1  gt   lt tr gt     lt td gt  lt input type  text  value      gt  lt  td gt     lt td gt  lt input type  text  value      gt  lt  td gt     lt td gt  lt input type  text  value      gt  lt  td gt     lt td gt  lt input type  text  value      gt  lt  td gt   lt  tr gt   lt tr gt     lt td gt  lt input type  text  value      gt  lt  td gt     lt td gt  lt input type  text  value      gt  lt  td gt     lt td gt  lt input type  text  value      gt  lt  td gt     lt td gt  lt input type  text  value      gt  lt  td gt   lt  tr gt   lt table gt    I want to count the number of td element in a row  I am trying    document getElementById     cells length  document getElementById     length  document getElementById     getElementsByTagName  td   length    It did not show actual result

User · Answer

table1   find input  length

User · Answer

If the colspan or rowspan is all set to 1  counting the children tds will give the correct answer  However  if there are spans  we cannot count the number of columns exactly  even by the maximum number of tds of the rows  Consider the following example    x000D   x000D  var mytable   document getElementById  table   x000D  for  var i 0  i  lt  mytable rows length    i    x000D   document write mytable rows i  cells length     lt br gt     x000D    x000D  table  th  td   x000D    border  1px solid black  x000D    border-collapse  collapse  x000D    padding  3px  x000D    x000D   lt table id  table  gt  x000D       lt thead gt  x000D           lt tr gt  x000D               lt th colspan  2  gt Header lt  th gt  x000D               lt th rowspan  2  gt Hi lt  th gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt th gt Month lt  th gt  x000D               lt th gt Savings lt  th gt  x000D           lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D           lt tr gt  x000D               lt td colspan  2  gt hello lt  td gt  x000D               lt td gt world lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt hello lt  td gt  x000D               lt td colspan  2  gt again lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

First off  when you call getElementById  you need to provide an id   o O  The only item in your dom with an id is the table element   If you can  you could add ids  make sure they are unique  to your tr elements   Alternatively  you can use getElementsByTagName  tr   to get a list of tr elements in your document  and then get the number of tds   here is a fiddle that console logs the results

User · Answer

It s a bad idea to count the td elements to get the number of columns in your table  because td elements can span multiple columns with colspan   Here s a simple solution using jquery    x000D   x000D  var length   0  x000D     tr first   find  td th   each function    x000D   var colspan     this  attr  colspan    x000D    if typeof colspan      undefined   amp  amp  colspan  gt  0   x000D     length    parseInt colspan   x000D     else  x000D          length    1  x000D      x000D      x000D   x000D     div   html  number of columns    length   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt table gt  x000D   lt tr gt  x000D     lt td gt single lt  td gt  x000D     lt td colspan  2  gt double lt  td gt  x000D     lt td gt single lt  td gt  x000D     lt td gt single lt  td gt  x000D   lt  tr gt  x000D   lt  table gt  x000D   lt div gt  lt  div gt  x000D   x000D   x000D    For a plain Javascript solution  see Emilio s answer

User · Answer

document getElementById  table1   rows 0  cells length   cells is not a property of a table  rows are  Cells is a property of a row though

User · Answer

lt table id  table1  gt   lt tr gt     lt td colspan 4 gt  lt input type  text  value      gt  lt  td gt    lt  tr gt   lt tr gt     lt td gt  lt input type  text  value      gt  lt  td gt     lt td gt  lt input type  text  value      gt  lt  td gt     lt td gt  lt input type  text  value      gt  lt  td gt     lt td gt  lt input type  text  value      gt  lt  td gt    lt  tr gt   lt table gt   lt script gt      var row document getElementById  table1   rows length      for i 0 i lt row i         console log  Row   parseFloat i 1        document getElementById  table1   rows i  cells length    column           lt  script gt    Result    Row 1   1 column Row 2   4 column

User · Answer

You could do  alert document getElementById  table1   rows 0  cells length    fiddle here http   jsfiddle net TEZ73

User · Answer

Count all td in table1    x000D   x000D  console log  x000D  table1 querySelectorAll  td   length x000D    x000D   lt table id  table1  gt  x000D   lt tr gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D   lt  tr gt  x000D   lt tr gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D   lt  tr gt  x000D   lt table gt  x000D   x000D   x000D    Count all td into each tr of table1    x000D   x000D  table1 querySelectorAll  tr   forEach function e   x000D   console log  e querySelectorAll  td   length   x000D     x000D   lt table id  table1  gt  x000D   lt tr gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D   lt  tr gt  x000D   lt tr gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D     lt td gt  lt input type  text  value      gt  lt  td gt  x000D   lt  tr gt  x000D   lt table gt  x000D   x000D   x000D

User · Answer

Why not use reduce so that we can take colspan into account      function getColumns table        var cellsArray           var cells   table rows 0  cells          Cast the cells to an array         there are  cooler  ways of doing this  but this is the fastest by far         Taken from https   stackoverflow com a 15144269 6424295     for var i -1  l cells length    i   l  cellsArray i  cells i         return cellsArray reduce           cols  cell    gt                 Check if the cell is visible and add it   ignore it              cell offsetParent     null    cols    cell colSpan   cols          0

[javascript] Count number of columns in a table row

Examples related to javascript

Examples related to html-table