的Javascript動態表格製作錯誤

HTML的Javascript動態表格製作錯誤

<!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>"

如何解決它，而是將打印與X * X行和單元2代正常表作爲第一價值electbox？

來源

2015-10-13 triPs

s+="<td>"

在這裏你關閉td標籤'''，然後才嘗試添加class和onclick事件。所以這是錯誤的，因爲class和onclick屬性是td標籤的內容。

剛剛嘗試做這種方式：

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

來源

2015-10-13 23:11:58

它的工作，但我怎樣才能讓這個它會創建2個類似的表彼此相鄰。關鍵是要獲得戰列網格 – triPs

有幾個錯誤：1）只是決定要發送到buildBoard函數，在一種情況下你發送元素ID，並在另一個發送DOM元素。讓我們考慮一下，你將發送元素ID，那麼你需要改變這一行'document.getElementById（'myboard'）。innerHTML = s;'在buildBoard函數中：'document.getElementById（id）.innerHTML = s;'。之後，改變buildBoard（myboard，s1）; buildboard（'myboard'，s1）;和buildBoard（opponentboard，s1）; buildboard（'opponentboard'，s1）; –

的Javascript動態表格製作錯誤

回答

相關問題