如果依赖于表格单元格，则更改表格单元格的颜色

Question

这是我的代码：

 var row = [ [4, 7, 2, 6, 2, 1, 9, 0], [6, 1, 5, 0, 4, 3, 7, 1], [0, 3, 2, 1, 8, 2, 8, 4], [8, 9, 4, 5, 3, 0, 5, 0], [4, 6, 7, 8, 6, 7, 3, 9], [9, 3, 2, 0, 1, 5, 8, 7], [6, 1, 9, 7, 4, 9, 2, 4], [2, 8, 6, 5, 3, 0, 6, 5], [0, 3, 4, 8, 2, 5, 3, 9] ]; var text = "<table id='swertrestable'>"; for (i = 0; i < 9; i++) { text += "<tr>"; for (x = 0; x < 8; x++) { text += "<td>" + row[i][x] + "</td>"; } text += "</tr>"; } text += "</table>"; document.getElementById("demo").innerHTML = text; function findNumbers() { var lastcombination = document.getElementById('lastresult').value; var output = []; var sNumber = lastcombination.toString(); for (var y = 0, len = sNumber.length; y < len; y += 1) { output.push(+sNumber.charAt(y)); } var no1 = parseInt(output[0]); var no2 = parseInt(output[1]); var no3 = parseInt(output[2]); var table = document.getElementById("swertrestable"); var rows = table.getElementsByTagName("tr"); for (var i = 0, row; row = table.rows[i]; i++) { for (var j = 0, col; col = row.cells[j]; j++) { rows[i].cells[j].classList.remove("red"); if (parseInt(col.innerHTML) == no1 || parseInt(col.innerHTML) == no2 || parseInt(col.innerHTML) == no3) { rows[i].cells[j].className = 'red'; } } } } 

 table, th, td { border: 2px solid black; border-collapse: collapse; } td { padding: 10px 20px; } td.red { color: #fff; background-color: #f00; } td.blue { color: #fff; background-color: #3498db; } td.redtoblue { color: #fff; background-color: #3498db; } 

 <p id="demo"></p> <h2>INPUT 3 DIGITS</h2><br> <input type="text" name="lastresult" id="lastresult"> <button onclick="findNumbers()">Submit</button> 

它的作用是对表进行迭代，获取其值并将其与no1 ， no2或no3 ，如果相等，则将添加一个名为"red"的类名，该类名会将单元格的背景色更改为红色。

现在，我只想将类添加到相邻单元（顶部，底部，左侧，右侧）的3个组合中。 我认为下面的图片会更清晰。

什么是正确的循环？

Answer 1

不太优雅的解决方案，但是可以用！ 请试试。

    var row = [
      [4, 7, 2, 6, 2, 1, 9, 0],
      [6, 1, 5, 0, 4, 3, 7, 1],
      [0, 3, 2, 1, 8, 2, 8, 4],
      [8, 9, 4, 5, 3, 0, 5, 0],
      [4, 6, 7, 8, 6, 7, 3, 9],
      [9, 3, 2, 0, 1, 5, 8, 7],
      [6, 1, 9, 7, 4, 9, 2, 4],
      [2, 8, 6, 5, 3, 0, 6, 5],
      [0, 3, 4, 8, 2, 5, 3, 9]
    ];

    var text = "<table id='swertrestable'>";

    for (i = 0; i < 9; i++) {
      text += "<tr>";
      for (x = 0; x < 8; x++) {
        text += "<td>" + row[i][x] + "</td>";
      }
      text += "</tr>";
    }

    text += "</table>";

    document.getElementById("demo").innerHTML = text;

    function findNumbers() {
        // remove previous red or blue classes
        var elems = document.querySelectorAll(".blue");
        [].forEach.call(elems, function(el) {
            el.classList.remove("blue");
        });

        var elems = document.querySelectorAll(".red");

        [].forEach.call(elems, function(el) {
            el.classList.remove("red");
        });    

      var lastcombination = document.getElementById('lastresult').value;
      var output = [];
      var sNumber = lastcombination.toString();

      for (var y = 0, len = sNumber.length; y < len; y += 1) {
        output.push(+sNumber.charAt(y));
      }

      var no1 = parseInt(output[0]);
      var no2 = parseInt(output[1]);
      var no3 = parseInt(output[2]);

      var numArr = new Array(no1,no2,no3);

      var rightCell, leftCell, topCell, bottomCell, thisCell;

      var table = document.getElementById("swertrestable");
      var rows = table.getElementsByTagName("tr");
      for (var i = 0, row; row = table.rows[i]; i++) {
        for (var j = 0, col; col = row.cells[j]; j++) {
          //rows[i].cells[j].classList.remove("red");
          rows[i].cells[j].classList.remove("blue");

          thisCell = parseInt(col.innerHTML);

          if(row.cells[j+1]) {
            rightCell = parseInt((row.cells[j+1]).innerHTML);
          }
          else {
            rightCell = ""    ;
          }

          if(row.cells[j-1]) {
            leftCell = parseInt((row.cells[j-1]).innerHTML);    
          }
          else {
            leftCell = "";    
          }

          if(rows[i-1]) {
               topCell = parseInt((rows[i-1].cells[j]).innerHTML);
          }
          else {
               topCell = "";
          }
          if(rows[i+1]) {
             bottomCell = parseInt((rows[i+1].cells[j]).innerHTML);
          }
          else {
             bottomCell = "";    
          }

          //if (parseInt(col.innerHTML) == no1 || parseInt(col.innerHTML) == no2 || parseInt(col.innerHTML) == no3) {
          var thisNum = numArr.indexOf(thisCell);
          if( thisNum !== -1)    {

            var neighbours = 0;

            if ((topCell == no1 || topCell == no2 || topCell == no3) && topCell!=thisCell) {
               neighbours++;
            }
            if ((leftCell == no1 || leftCell == no2 || leftCell == no3) && leftCell!==thisCell) {
               neighbours++;
            }
            if ((rightCell == no1 || rightCell == no2 || rightCell == no3) && rightCell!==thisCell) {
               neighbours++;
            }        
            if ((bottomCell == no1 || bottomCell == no2 || bottomCell == no3) && bottomCell!==thisCell) {
               neighbours++;
            } 

            if(neighbours===2) {            
                if(topCell!=="" && numArr.indexOf(topCell)!== -1 ) { rows[i-1].cells[j].className = 'red';}
                if(leftCell!=="" && numArr.indexOf(leftCell)!== -1) { rows[i].cells[j-1].className = 'red'; }
                if(rightCell!=="" && numArr.indexOf(rightCell)!== -1) { rows[i].cells[j+1].className='red'; }
                if(bottomCell!=="" && numArr.indexOf(bottomCell)!== -1) { rows[i+1].cells[j].className = 'red'; }

                rows[i].cells[j].className = 'red';
            }
            else {

                var thisClass = rows[i].cells[j].className;
                if(thisClass != 'red') {
                    rows[i].cells[j].className = 'blue';
                }
            }

          }     

        }
      }

    }