Количество столбцов в строке таблицы

Ответ 1

document.getElementById('table1').rows[0].cells.length

ячейки не являются свойством таблицы, строки - это. Ячейки являются свойством строки, хотя

Ответ 2

Вы могли бы сделать

alert(document.getElementById('table1').rows[0].cells.length)

скрипка здесь http://jsfiddle.net/TEZ73/

Ответ 3

Почему бы не использовать сокращение, чтобы мы могли учитывать 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
    );
}

Ответ 4

Прежде всего, когда вы вызываете getElementById, вам нужно указать идентификатор. о_О

Единственный элемент в вашем dom с id - это элемент table. Если возможно, вы можете добавить идентификаторы (убедитесь, что они уникальны) к вашим элементам tr.

В качестве альтернативы вы можете использовать getElementsByTagName('tr'), чтобы получить список элементов tr в вашем документе, а затем получить количество tds.

вот скрипка, в которой консоль регистрирует результаты...

Ответ 5

Подсчитайте все 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>

Ответ 6

Если 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>

Ответ 7

<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

Ответ 8

Плохо считать количество элементов 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>

Ответ 9

$('#table1').find(input).length