[英]Changing a table cell colour ifdepending on its neighbours
這是我的代碼:
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個組合中。 我認為下面的圖片會更清晰。
什么是正確的循環?
不太優雅的解決方案,但是可以用! 請試試。
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';
}
}
}
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.