javascript - 根据其邻居更改表格单元格颜色

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';
                }
            }

          }     

        }
      }

    }