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);

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

1 个答案: