Question

HTML

 <!DOCTYPE html>
 <html>
 <head>
 <title>BOOM</title>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="Style/main.css">
 </head>
 <body>
 <div id="headline">

<h1>Laevade Pommitamine<h1>


<select id="grid" name ="grid" onChange="populate()">
<option value=""></option>
<option value="3">3x3</option>
<option value="4">4x4</option>
<option value="5">5x5</option>
<option value="6">6x6</option>
<option value="7">7x7</option>
<option value="8">8x8</option>
<option value="9">9x9</option>
<option value="10">10x10</option>
</select>

<select id ="ships"></select>
<input type="button" value="New Game" onclick="newGame()">
</div>

<div id="myboard" style="display:inline-block"></div>
<div id="opponentboard" style="display:inline-block"></div>



<script src="scripts/main.js"></script>
</body>
</html>

JAVASCRIPT

var table=[[0,0],[0,0]]; //myships=[[0,0],[1,1]];
function get(x){
return document.getElementById(x);
}

function populate(){
var s1 = document.getElementById('grid');
var s2 = document.getElementById('ships');

if(s1.value == "3"){
    var optionArray = ["|","1|1","2|2"];
}
else if(s1.value == "4"){
    var optionArray = ["|","1|1","2|2","3|3"];
}
else if(s1.value == "5"){
    var optionArray = ["|","1|1","2|2","3|3","4|4"];
}
else if(s1.value == "6"){
    var optionArray = ["|","1|1","2|2","3|3","4|4","5|5"];
}
else if(s1.value == "7"){
    var optionArray = ["|","1|1","2|2","3|3","4|4","5|5","6|6"];
}
else if(s1.value == "8"){
    var optionArray = ["|","1|1","2|2","3|3","4|4","5|5","6|6","7|7"];
}
else if(s1.value == "9"){
    var optionArray == ["|","1|1","2|2","3|3","4|4","5|5","6|6","7|7","8|8"];
}
else if(s1.value == "10"){
    var optionArray = ["|","1|1","2|2","3|3","4|4","5|5","6|6","7|7","8|8","9|9"];
}    

//clear eelmine list
var length = s2.options.length;
for (i = 0; i < length; i++) {
    s2.remove(0);
}

//ehita uus list
for(var option in optionArray){
    var pair = optionArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[0];
    newOption.innerHTML = pair[1];
    s2.options.add(newOption);
}
}

/*function changeColorRandomly(){
var N = document.getElementById("ships").value
console.log(ships.value);
var tableRows = document.getElementsByTagName("tr"),
    i = 0, row, col, trRow, tdCol;
    while(i < N){
        row = Math.floor(Math.random()*grid.value);
        col = Math.floor(Math.random()*grid.value);
        trRow = tableRows[row];
        tdCol = trRow.childNodes[col];
        if(tdCol.style.backgroundColor !== "yellow"){
            tdCol.style.backgroundColor = "yellow";
            i++;
            console.log(i);
        }
    }
}*/


function tc(tabelid, row, col) {
var cid;  // lokaalne, aint funktsiooni sees

console.log(("click: "+tabelid+row)+col);
cid=(tabelid+row)+col;
get(cid).innerHTML = "*";
//myships[row][col]=1;
get(cid).style.backgroundColor = "red";

//myships[1000]=45;
table[row][col]=1;
// $("#c11").html("*") jquery
}

function changeFunc(id){
var selectBox = get(id);
var val = selectBox.options[selectBox.selectedIndex].value;
console.log(val);
buildBoard("myboard",val); 
buildBoard("opponentboard", val);
}
function buildBoard(id, size) {
var s=" ";
var i,j;
var s1 = document.getElementById('grid');
var s2 = document.getElementById('ships');
var myboard = document.getElementById('myboard');
var opponentboard = document.getElementById('opponentboard');

s+="<table>";
for(i=0; i<parseInt(size); i++) {
    s+="<tr>";
    for(j=0; j<parseInt(size); j++) {
        s+="<td>"
        s+="class='g' ";
        s+=" onclick=\"tc('"+id+"',"+i+","+j+");\"";
        s+=" id='"+id+i+j+"'>";
        s+=i+"_"+j;
        s+="</td>"
    }
    s+="</tr>";
}
s+="</table>";
document.getElementById('myboard').innerHTML=s;
console.log(s);
}

function newGame() {
var s1 = document.getElementById('grid').value;
var s2 = document.getElementById('ships').value;
var myboard = document.getElementById('myboard');
var opponentboard = document.getElementById('opponentboard');
buildBoard(myboard, s1);
buildBoard(opponentboard, s1);

}

所以我的问题是，当我点击新的游戏按钮时，它会创建一个表...但是在正常的单元格上打印它：

        s+="<td>"
        s+="class='g' ";
        s+=" onclick=\"tc('"+id+"',"+i+","+j+");\"";
        s+=" id='"+id+i+j+"'>";
        s+=i+"_"+j;
        s+="</td>"

如何修复它，而不是在第一个选择框中打印2个普通表格，其中X * X行和单元格作为值？

Answer 1

s+="<td>"

在这里，您使用＆＃39;＆gt;＆＃39;关闭了td标记，然后才尝试向其添加class和onclick事件。所以这是错误的，因为class和onclick属性是td标记的内容。

试着这样做：

s+="<td ";
s+="class='g' ";

Javascript动态表创建错误

1 个答案: