how to check with javascript how many columns given html table has?

Question

That is how is the maximum colspan, for example:

<table>
 <tr>
  <td> 1 </td>
  <td> 2 </td>
  <td> 3 </td>
 </tr>
 <tr>
  <td> 1 </td>
  <td> 2 </td>
 </tr>
 <tr>
  <td> 1 </td>
 </tr>
</table>

should give 3

plain JS or using a particular framework (jQuery/mootools/etc) ? — stecb, Jun 15 '11 at 15:34
Shouldn't each table row have the same number of columns? Or at least a colspan on the cell(s) of the row with the fewest columns? — jszpila, Jun 15 '11 at 15:41
@Jan That's what I was thinking. If this is the asker's website, he should probably fix things such that all rows have the [same number of columns](http://www.w3.org/TR/html4/struct/tables.html). If it's not, of course, this is the right way to go about it. — brymck, Jun 15 '11 at 15:47
I also found that `colspan='100%'` sets the `` tag do maximum available colspan. -> here http://stackoverflow.com/questions/398734/colspan-all-columns — rsk82, Jun 16 '11 at 12:09

score 3 · Answer 1 · answered Jun 15 '11 at 15:37

3

Find each <tr> with "getElementsByTagName()"
For each <tr>, find each <td> similarly
Count the <td> elements, then iterate through and add "colspan - 1" for each <td> with a "colspan" attribute
Maintain a maximum count over all rows.

answered Jun 15 '11 at 15:37

Pointy

405,095
59
585
614

1

@Guffa yea, I hate those :-) You're right though; that would make it ... weird. – Pointy Jun 15 '11 at 15:55

score 2 · Answer 2 · answered Jun 15 '11 at 15:55

See this jsFiddle for an example. As you requested, it's in plain JavaScript:

var table = document.getElementById("myTable");
var max = 0;

for (var i = 0, iLen = table.rows.length; i < iLen; i++) {
  var temp = 0;
  var cells = table.rows[i].cells;

  for (var j = 0, jLen = cells.length; j < jLen; j++) {
    // This is very important. If you just take length you'll get the
    // the wrong answer when colspan exists
    temp += cells[j].colSpan;
  }

  if (temp > max) {
    max = temp;
  }
}

alert(max);

score 1 · Answer 3 · answered Jun 15 '11 at 15:41

See this fiddle for a jQuery version. It counts the number of td elements in each tr and checks each time to see if a greater number has been encountered. The max variable stores the current maximum number of columns found:

var max = 0;
$("tr").each(function() {
   var count = $(this).find("td").length;
    if(count > max) max = count;
});
alert(max);

score 1 · Accepted Answer · answered Jun 15 '11 at 15:45

Each table has a rows array, and each row has a cells array. Then it's just a matter a finding the maximum.

function calculateCells(){
    var table = document.getElementById("table");
    var max = 0;
    for(var i=0;i<table.rows.length;i++) {
        if(max < table.rows[i].cells.length)
            max = table.rows[i].cells.length;
    }
    return max;
}

how to check with javascript how many columns given html table has?

4 Answers4