Javascript 比较html表格中的单元格bgcolor，使用For/If构造_Javascript_Html

Javascript 比较html表格中的单元格bgcolor，使用For/If构造

javascript html

Javascript 比较html表格中的单元格bgcolor，使用For/If构造,javascript,html,Javascript,Html,单击表格单元格时，颜色将变为红色。当水平方向有4个红色单元格时，它将显示一条消息如果我给出单元格的确切ID（所有单元格都有ID号，如10、11、12等），它就可以工作。但我希望单元格ID在下面的结构中是一个变量。尝试使用数组，但无法解决此问题。这适用于ID号为10/16/22/28等的情况，但不知道如何让它检查11/17/23/29，例如for循环。我不知道如何在forloop中获取getElementById检查。还是另一个建筑更好 <html> <head>

单击表格单元格时，颜色将变为红色。当水平方向有4个红色单元格时，它将显示一条消息

如果我给出单元格的确切ID（所有单元格都有ID号，如10、11、12等），它就可以工作。但我希望单元格ID在下面的结构中是一个变量。尝试使用数组，但无法解决此问题。这适用于ID号为10/16/22/28等的情况，但不知道如何让它检查11/17/23/29，例如for循环。我不知道如何在forloop中获取getElementById检查。还是另一个建筑更好

<html>
    <head>
        <title>Temp</title>
        <style>

        table {
            overflow: hidden;
        }

        td, th {
            position: relative;
            border: 2px solid grey;
        } 

        td:hover::after,
        th:hover::after {
            content: "";
            position: absolute;
            background-color: lightgreen;
            left: 0;
            top: -5000px;
            height: 10000px;
            width: 100%;
            z-index: -1;
        }   

        td:hover {
            background-color: blue;
        }

        </style>
        <script>

        var a = "rgb(255,255,255)"; //white
        var b = "rgb(255, 0, 0)";       //red
        var c = "purple";

        function check(){

        var xcolor = "rgb(255, 0, 0)"
        var i = 10;
        var xbb = i + 6;
        var xcc = xbb + 6;
        var xdd = xcc + 6;
        var xa = document.getElementById(i).style.backgroundColor;  
        var xb = document.getElementById(xbb).style.backgroundColor;
        var xc = document.getElementById(xcc).style.backgroundColor;
        var xd = document.getElementById(xdd).style.backgroundColor;



          for (i = 10; i < 52; i++){

            if (xa == xcolor && xb == xcolor && xc == xcolor && xd == xcolor){

                alert("thats 4!");
                break;

            }

             continue;
            }
        }


        function mouseclick(clicked){



        if (document.getElementById(clicked).style.backgroundColor = a)
        {
        document.getElementById(clicked).style.backgroundColor = b;             
        }

        check();
        }



         </script>
    </head>
    <body>
        <p>Click!</p>
        <table> 
            <tr>
                <td id="10" onclick="mouseclick(this.id)"> v10 </td>
                <td id="16" onclick="mouseclick(this.id)"> v16 </td>
                <td id="22" onclick="mouseclick(this.id)"> v22 </td>
                <td id="28" onclick="mouseclick(this.id)"> v28 </td>
                <td id="34" onclick="mouseclick(this.id)"> v34 </td>
                <td id="40" onclick="mouseclick(this.id)"> v40 </td>
                <td id="46" onclick="mouseclick(this.id)"> v46 </td>
            </tr>
        </table>
    </body>
</html>


临时雇员
桌子{
溢出：隐藏；
}
td，th{
位置：相对位置；
边框：2倍纯色灰色；
} 
td:hover：：之后，
th:悬停：：之后{
内容：“；
位置：绝对位置；
背景颜色：浅绿色；
左：0；
顶部：-5000px；
高度：10000px；
宽度：100%；
z指数：-1；
}   
td:悬停{
背景颜色：蓝色；
}
var a=“rgb（255255）”//白色
var b=“rgb（255,0,0）”//红色
var c=“紫色”；
函数检查（）{
var xcolor=“rgb（255,0,0）”
var i=10；
var xbb=i+6；
var xcc=xbb+6；
var xdd=xcc+6；
var xa=document.getElementById（i）.style.backgroundColor；
var xb=document.getElementById（xbb）.style.backgroundColor；
var xc=document.getElementById（xcc.style.backgroundColor）；
var xd=document.getElementById（xdd）.style.backgroundColor；
对于（i=10；i<52；i++）{
如果（xa==xcolor&&xb==xcolor&&xc==xcolor&&xd==xcolor）{
警惕（“那是4！”）；
打破
}
继续；
}
}
功能鼠标单击（已单击）{
if（document.getElementById（单击）.style.backgroundColor=a）
{
document.getElementById（单击）.style.backgroundColor=b；
}
检查（）；
}
点击
v10
v16
v22
v28
v34
v40
v46

添加一个具有预期背景颜色的CSS类，然后比较一个表行是否有四个单元格与该类，这将更容易

这种方法使逻辑更易于控制，并且不再需要

id

。如果以后需要，您仍然可以使用它们，但是对于这个例程，它们不是必需的

在

mouseclick（）

中，我们检查click元素是否包含预期的CSS类，如果不包含，则添加它

然后，在

检查（）中：

我们将表行存储在一个数组中
在数组中循环
使用预期的CSS类存储当前行中的所有单元格
那么总数是4我们会通知用户

我向表中添加了第二行，以便您可以测试多行

函数检查（）{
var rows=document.querySelectorAll（'tr'）；
对于（变量i=0；i

表格{
溢出：隐藏；
}
运输署，
th{
位置：相对位置；
边框：2倍纯色灰色；
}
td:hover：：之后，
th:悬停：：之后{
内容：“；
位置：绝对位置；
背景颜色：浅绿色；
左：0；
顶部：-5000px；
高度：10000px；
宽度：100%；
z指数：-1；
}
td:悬停{
背景颜色：蓝色；
}
瑞德先生{
背景色：rgb（255,0,0）；
}
}

v10
v16
v22
v28
v34
v40
v46
v110
v116
v122
v128
v134
v140
v146
你能发布一个工作代码，让人们讨论并提出建议吗？我更新了代码：）