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

JavaScript function find and change CSS of column if it has more than one DIV

本文关键字：查找 CSS JavaScript DIV 如果 函数      更新时间：2023-09-26

我正在尝试让JavaScript更改列的颜色，并在包含2个以上div元素的情况下添加一个msg变量。我的代码在下面，我知道它还没有完成，所以希望得到一些指导。

我使用的不是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>

提前感谢！

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();

<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>

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>
相关文章：