JavaScript函数查找并更改列的CSS（如果它有多个DIV）

我试图让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>

A列
B栏

脚本：

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

函数alertTooMany（）{
var row=document.getElementById（'row'），//Get row
var col=row.getElementsByTagName（'td'），//获取行中的列
var div=col.getElementsByTagName（'div'），//在列中获取div
var num=divs.length；//计数DIV标记
//准备并显示消息
if（num<2）{//如果div的数量小于2
msg=“列打开”；
}
else如果（num>2）{//如果div的数量大于2
msg=“警告：列已满！”；
}
else{//如果div的数量为2
msg=“列已满”；
}
document.getElementById（'message'）.innerHTML=msg；
}

提前谢谢

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

函数alertTooMany（）{
var row=document.getElementById（'row'）；//获取行
var cols=row.getElementsByTagName（'td'）；//获取行中的列
//遍历列
对于（变量i=0；i2）{//如果div的数量大于2
msg=“警告：列已满！”；
//查找索引与满列相同的标题
var headers=document.querySelectorAll（'th'）；
var matchingHeader=标题[i]；
if（匹配头）{
matchingHeader.style['color']='red'；
}
col.style['color']='red'；
}
else{//如果div的数量为2
msg=“列已满”；
}
document.getElementById（'message'）.innerHTML=msg；
}
}
警报过多（）；

函数alertTooMany（）{
var row=document.getElementById（'row'）；//获取行
var cols=row.getElementsByTagName（'td'）；//获取行中的列
//遍历列
对于（变量i=0；i2）{//如果div的数量大于2
msg=“警告：列已满！”；
//查找索引与满列相同的标题
var headers=document.querySelectorAll（'th'）；
var matchingHeader=标题[i]；
if（匹配头）{
matchingHeader.style['color']='red'；
}
col.style['color']='red'；
}
else{//如果div的数量为2
msg=“列已满”；
}
document.getElementById（'message'）.innerHTML=msg；
}
}
警报过多（）；

函数alertTooMany（）{
var row=document.getElementById（'row'）；//获取行
var cols=row.getElementsByTagName（'td'）；//获取行中的列
//遍历列
对于（变量i=0；i2）{//如果div的数量大于2
msg=“警告：列已满！”；
//查找索引与满列相同的标题
var headers=document.querySelectorAll（'th'）；
var matchingHeader=标题[i]；
if（匹配头）{
matchingHeader.style['color']='red'；
}
col.style['color']='red'；
}
else{//如果div的数量为2
msg=“列已满”；
}
document.getElementById（'message'）.innerHTML=msg；
}
}
警报过多（）；

函数alertTooMany（）{
var row=document.getElementById（'row'）；//获取行
var cols=row.getElementsByTagName（'td'）；//获取行中的列
//遍历列
对于（变量i=0；i2）{//如果div的数量大于2
msg=“警告：列已满！”；
//查找索引与满列相同的标题
var headers=document.querySelectorAll（'th'）；
var matchingHeader=标题[i]；
if（匹配头）{
<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>

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

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