I have a table similar to:
<table id="table1">
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<table>
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.
This question is related to
javascript
html-table
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) =>
// Check if the cell is visible and add it / ignore it
(cell.offsetParent !== null) ? cols += cell.colSpan : cols,
0
);
}
Count all td in table1:
console.log(_x000D_
table1.querySelectorAll("td").length_x000D_
)
_x000D_
<table id="table1">_x000D_
<tr>_x000D_
<td><input type="text" value="" /></td>_x000D_
<td><input type="text" value="" /></td>_x000D_
<td><input type="text" value="" /></td>_x000D_
<td><input type="text" value="" /></td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td><input type="text" value="" /></td>_x000D_
<td><input type="text" value="" /></td>_x000D_
<td><input type="text" value="" /></td>_x000D_
<td><input type="text" value="" /></td>_x000D_
</tr>_x000D_
<table>
_x000D_
Count all td into each tr of table1.
table1.querySelectorAll("tr").forEach(function(e){_x000D_
console.log( e.querySelectorAll("td").length )_x000D_
})
_x000D_
<table id="table1">_x000D_
<tr>_x000D_
<td><input type="text" value="" /></td>_x000D_
<td><input type="text" value="" /></td>_x000D_
<td><input type="text" value="" /></td>_x000D_
<td><input type="text" value="" /></td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td><input type="text" value="" /></td>_x000D_
<td><input type="text" value="" /></td>_x000D_
<td><input type="text" value="" /></td>_x000D_
<td><input type="text" value="" /></td>_x000D_
</tr>_x000D_
<table>
_x000D_
You could do
alert(document.getElementById('table1').rows[0].cells.length)
fiddle here http://jsfiddle.net/TEZ73/
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.
If the colspan
or rowspan
is all set to 1
, counting the children td
s will give the correct answer. However, if there are spans, we cannot count the number of columns exactly, even by the maximum number of td
s of the rows. Consider the following example:
var mytable = document.getElementById('table')_x000D_
for (var i=0; i < mytable.rows.length; ++i) {_x000D_
document.write(mytable.rows[i].cells.length + "<br>");_x000D_
}
_x000D_
table, th, td {_x000D_
border: 1px solid black;_x000D_
border-collapse: collapse;_x000D_
padding: 3px;_x000D_
}
_x000D_
<table id="table">_x000D_
<thead>_x000D_
<tr>_x000D_
<th colspan="2">Header</th>_x000D_
<th rowspan="2">Hi</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<th>Month</th>_x000D_
<th>Savings</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td colspan="2">hello</td>_x000D_
<td>world</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>hello</td>_x000D_
<td colspan="2">again</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>
_x000D_
$('#table1').find(input).length
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:
var length = 0;_x000D_
$("tr:first").find("td,th").each(function(){_x000D_
var colspan = $(this).attr("colspan");_x000D_
if(typeof colspan !== "undefined" && colspan > 0){_x000D_
length += parseInt(colspan);_x000D_
}else{_x000D_
length += 1;_x000D_
}_x000D_
});_x000D_
_x000D_
$("div").html("number of columns: "+length);
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<table>_x000D_
<tr>_x000D_
<td>single</td>_x000D_
<td colspan="2">double</td>_x000D_
<td>single</td>_x000D_
<td>single</td>_x000D_
</tr>_x000D_
</table>_x000D_
<div></div>
_x000D_
For a plain Javascript solution, see Emilio's answer.
<table id="table1">
<tr>
<td colspan=4><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<table>
<script>
var row=document.getElementById('table1').rows.length;
for(i=0;i<row;i++){
console.log('Row '+parseFloat(i+1)+' : '+document.getElementById('table1').rows[i].cells.length +' column');
}
</script>
Result:
Row 1 : 1 column
Row 2 : 4 column
Source: Stackoverflow.com