Javascript随机单元格背景颜色变化

Question

我正在尝试创建一个表。 ruudud.value 是来自 <select> 的值。但是当这个函数正在创建一个表格时，我希望它在其中放置一些随机的黄色单元格。 这是一个小型学校项目，此代码是创建战舰游戏的代码的一部分。

如果可能的话。当它确实创建了一个随机的黄色单元格时，它是否也可以将下一个单元格涂成黄色？ （创建一个 2 单元船）。

function addTable() {

    var myTableDiv = document.getElementById("myDynamicTable");
    var table = document.createElement('TABLE');
    table.border = '1';

    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
    var x = Math.floor((Math.random() * ruudud.value) + 0);
    var y = Math.floor((Math.random() * ruudud.value) + 0);

    for (var i = 0; i < ruudud.value; i++) {
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);
        console.log(x + "," + y);
        for (var j = 0; j < ruudud.value; j++) {
            var td = document.createElement('TD');
            var td = document.getElementsByTagName("td");
            td.width = '50';
            td.height = '50';
            td.style.backgroundColor = "red";
            td.setAttribute("onClick", "colorChange(this)")
            td.innerHTML = (i + "," + j);
            if (td[i].innerHTML == (x + "," + y)) {
                td[i].setAttribute("style", "background:yellow;");

            }
            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
}
function colorChange(tdObj) {
tdObj.style.backgroundColor = "green";}

例子2：

function addTable() {

var myTableDiv = document.getElementById("myDynamicTable");


var table = document.createElement('TABLE');
table.border='1';

var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
var x = Math.floor((Math.random() * ruudud.value) + 0);
var y = Math.floor((Math.random() * ruudud.value) + 0);

for (var i=0; i<ruudud.value; i++){
   var tr = document.createElement('TR');
   tableBody.appendChild(tr);
 console.log(x + ","+y);  
   for (var j=0; j<ruudud.value; j++){
        var td = document.createElement('TD');
        var td2 = document.getElementsByTagName("td");
        var i = 0, tds = td.length;
        td.width='50';
        td.height='50';
        td.style.backgroundColor="white";
        td.setAttribute("onClick", "colorChange(this)")
        td.innerHTML = (i +","+ j);
        if(td2[i].innerHTML == (x + "," + y)) {
            td2[i].setAttribute("style", "background:yellow;");

        }
        tr.appendChild(td);
        }
   }
myTableDiv.appendChild(table);
}
function colorChange(tdObj) {
tdObj.style.backgroundColor = "green";}

Answer 1

在这两种情况下，您都是在将 td 元素附加到 DOM 之前选择它。您无需再次选择它，您可以在创建 td 元素时简单地应用样式。这是对您的代码的轻微修改。我还添加了一个条件，可以按照您的要求添加两格船。

function addTable(double) {
    var myTableDiv = document.getElementById("myDynamicTable");
    var table = document.createElement('TABLE');
    table.border = '1';

    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
    var x = Math.floor((Math.random() * ruudud.value) + 0);
    var y = Math.floor((Math.random() * ruudud.value) + 0);

    for (var i = 0; i < ruudud.value; i++) {
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);
        //console.log(x + "," + y);
        for (var j = 0; j < ruudud.value; j++) {
            var td = document.createElement('td');
            td.width = '50';
            td.height = '50';
            td.style.backgroundColor = "red";
            td.setAttribute("onClick", "colorChange(this)");
            td.innerHTML = (i + "," + j);
            if (x === i && y === j) {
                td.setAttribute("style", "background:yellow;");
            }
            // If you need to enable two-cell ships, pass true to the function
            // You can allow horizontal or vertical cells by changing x and ys in the equality checks below
            if(double){
                if(y+1 < ruudud.value){
                    if(x === i && y+1 === j){
                        td.setAttribute("style", "background:yellow;");
                    }
                }
                else{
                    if(x === i && y-1 === j){
                        td.setAttribute("style", "background:yellow;");
                    }
                }
            }
            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
}

function colorChange(tdObj) {
tdObj.style.backgroundColor = "green";}

addTable(true);