JavaScript函数如果有多个DIV，则查找并更改列的CSS

Question

我正在尝试使用JavaScript来更改列的颜色，并添加一个msg变量（如果它包含多于2个div元素）。我的代码在下面，我知道它未完成，所以希望得到一些指导。

我没有使用jQuery浏览器JS。

HTML：

<table>
    <tr>
        <th>Column A</th>
        <th>Column B</th>       
    </tr>

    <tr id="row">
        <td id="columnA">
            <div id="d1"></div>
        </td>
        <td id="columnB">
            <div id="d1"></div>
            <div id="d2"></div>
            <div id="d3"></div>
        </td>       
    </tr>
</table>

脚本：

<script>
function alertTooMany() {
    var row = document.getElementById('row'), // Get Row
    var col = row.getElementsByTagName('td'), // Get Columns in row
    var div = col.getElementsByTagName('div'), // Get Div in columns
    var num = divs.length; // count DIV tags

            // prepare and display message
            if (num < 2) { // If number of divs is less than 2
                msg = "Column Open";
            }
            else if (num > 2){ // If number of divs is greater than 2
                msg = "Warn: Column overfull!";
            }
            else { // If number of divs is 2
                msg = "Column Full"; 
            }
            document.getElementById('message').innerHTML = msg;
}
</script>

提前致谢！

Answer 1

您的HTML中没有任何ID为message的元素。而你的JavaScript代码有一些错误。

Fiddle

上的演示

HTML：

<table>
    <tr>
        <th>Column A</th>
        <th>Column B</th>
    </tr>
    <tr id="row">
        <td id="columnA">
            <div id="d1">1</div>
        </td>
        <td id="columnB">
            <div id="d1">1</div>
            <div id="d2">2</div>
            <div id="d3">3</div>
        </td>
    </tr>
</table>
<div id="message"></div>

的JavaScript：

function alertTooMany() {
    var row = document.getElementById('row'), // Get Row
        col = row.getElementsByTagName('td'); // Get Columns in row

    for (i = 0; i < col.length; i++) {
        var div = col[i].getElementsByTagName('div');
        var num = div.length;
        if (num < 2) { // If number of divs is less than 2
            msg = "Column Open";
        } else if (num > 2) { // If number of divs is greater than 2
            msg = "Warn: Column overfull!";
            for (i = 0; i < div.length; i++) {
                div[i].style.color = 'red';
            }
        } else { // If number of divs is 2
            msg = "Column Full";
        }
    }

    document.getElementById('message').innerHTML = msg;
}
alertTooMany();

Answer 2

<script>
    function alertTooMany() {
        var row = document.getElementById('row'); // Get Row
        var cols = row.getElementsByTagName('td'); // Get Columns in row

        // Iterating through columns
        for (var i = 0; i < cols.length; i++) {
            var col = cols[i];

            var divs = col.getElementsByTagName('div'); // Get Div in column
            var num = divs.length; // count DIV tags

            // prepare and display message
            if (num < 2) { // If number of divs is less than 2
                msg = "Column Open";
            }
            else if (num > 2){ // If number of divs is greater than 2
                msg = "Warn: Column overfull!";

                // Finding header with same index as overfull column
                var headers = document.querySelectorAll('th');
                var matchingHeader = headers[i];

                if (matchingHeader) {
                    matchingHeader.style['color'] = 'red';
                }

                col.style['color'] = 'red';
            }
            else { // If number of divs is 2
                msg = "Column Full"; 
            }
            document.getElementById('message').innerHTML = msg;
        }
    }

    alertTooMany();
</script>

Answer 3

HTML：

<table>
<tr>
    <th>Column A</th>
    <th>Column B</th>
</tr>
<tr id="row">
    <td id="columnA">
        <div id="d1">01</div>
        <span class="message"></span>
    </td>
    <td id="columnB">
        <div id="d1">11</div>
        <div id="d2">12</div>
        <div id="d3">13</div>
        <span class="message"></span>
    </td>
</tr>
</table>

脚本：

<script>
function alertTooMany() {
    var row = document.getElementById('row'); // Get Row
    var tds = row.getElementsByTagName('td'); // Get Columns in row

    for (var i = 0; i < tds.length; i++) {
        var divs = tds[i].getElementsByTagName('div'); // Get Div in columns
        num = divs.length; // count DIV tags
        // prepare and display message
        if (num < 2) { // If number of divs is less than 2
            msg = "Column Open";
            tds[i].style.color="green";
        } else if (num > 2){ // If number of divs is greater than 2
            msg = "Warn: Column overfull!";
            tds[i].style.color="red";
        } else { // If number of divs is 2
            msg = "Column Full"; 
        }
        document.getElementsByClassName("message")[i].innerHTML = msg;
    }
}
</script>