Ответ 1
document.getElementById('table1').rows[0].cells.length
ячейки не являются свойством таблицы, строки - это. Ячейки являются свойством строки, хотя
У меня есть таблица, похожая на:
<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>
Я хочу подсчитать количество элементов td в строке. Я стараюсь:
document.getElementById('').cells.length;
document.getElementById('').length;
document.getElementById('').getElementsByTagName('td').length;
Это не показало фактического результата.
document.getElementById('table1').rows[0].cells.length
ячейки не являются свойством таблицы, строки - это. Ячейки являются свойством строки, хотя
Вы могли бы сделать
alert(document.getElementById('table1').rows[0].cells.length)
скрипка здесь http://jsfiddle.net/TEZ73/
Почему бы не использовать сокращение, чтобы мы могли учитывать colspan? :)
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
);
}
Прежде всего, когда вы вызываете getElementById
, вам нужно указать идентификатор. о_О
Единственный элемент в вашем dom с id - это элемент table
. Если возможно, вы можете добавить идентификаторы (убедитесь, что они уникальны) к вашим элементам tr
.
В качестве альтернативы вы можете использовать getElementsByTagName('tr')
, чтобы получить список элементов tr
в вашем документе, а затем получить количество tds.
Подсчитайте все td в таблице 1:
console.log(
table1.querySelectorAll("td").length
)
<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>
Если colspan
или rowspan
все установлены в 1
, подсчет потомков td
даст правильный ответ. Однако, если есть промежутки, мы не можем точно посчитать количество столбцов, даже по максимальному количеству td
строк. Рассмотрим следующий пример:
var mytable = document.getElementById('table')
for (var i=0; i < mytable.rows.length; ++i) {
document.write(mytable.rows[i].cells.length + "<br>");
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 3px;
}
<table id="table">
<thead>
<tr>
<th colspan="2">Header</th>
<th rowspan="2">Hi</th>
</tr>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">hello</td>
<td>world</td>
</tr>
<tr>
<td>hello</td>
<td colspan="2">again</td>
</tr>
</tbody>
</table>
<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>
Результат:
Row 1 : 1 column
Row 2 : 4 column
Плохо считать количество элементов td
чтобы получить количество столбцов в вашей таблице, потому что элементы td
могут охватывать несколько столбцов с помощью colspan
.
Вот простое решение с использованием jquery:
var length = 0;
$("tr:first").find("td,th").each(function(){
var colspan = $(this).attr("colspan");
if(typeof colspan !== "undefined" && colspan > 0){
length += parseInt(colspan);
}else{
length += 1;
}
});
$("div").html("number of columns: "+length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>single</td>
<td colspan="2">double</td>
<td>single</td>
<td>single</td>
</tr>
</table>
<div></div>
$('#table1').find(input).length