时间戳

首页 > 解决方案 > 如何计算html表格中一行中填充的单元格数

javascript - 如何计算html表格中一行中填充的单元格数

问题描述

我写了一个用 s 填充的 html 表input。我如何使用 JavaScript 检查每行输入的数字是否不超过 5 个。

这是一个示例行

 <table id="mytable" onchange="xxx()">   
<tr>
    <td><input type="number" name="num1-1" min="1" max="10" ></td>
    <td><input type="number" name="num2-1" min="11" max="20" ></td>
    <td><input type="number" name="num3-1" min="21" max="30" ></td>
    <td><input type="number" name="num4-1" min="31" max="40" ></td>
    <td><input type="number" name="num5-1" min="41" max="50" ></td>
    <td><input type="number" name="num6-1" min="51" max="60" ></td>
    <td><input type="number" name="num7-1" min="61" max="70" ></td>
    <td><input type="number" name="num8-1" min="71" max="80" ></td>
    <td><input type="number" name="num9-1" min="81" max="90" ></td>
</tr>
</table>

标签： javascripthtmlrow

解决方案

尝试这样的事情：

function xxx() {
    // Get table element
    let table = document.getElementById("mytable");
    // Get table rows
    let rows = table.rows;
    let bool = false;

    // Go over rows
    for(i = 0; i < rows.length; i++) {
        // Get cells of current row
        const columns = rows[i].cells;
        let count = 0;

        // Go over current row's cells
        for(j = 0; j < columns.length; j++) {
            // Count a cell if it has a value
            if(columns[j].children[0].value != "") {
                count++;
            }
        }
        bool = count <= 5;
    }
    console.log(bool);
}

如果所有行每行的值不超过 5 个，则该函数打印 true。

推荐阅读