2017-10-11 110 views
-1

我也許有些奇怪的問題,但解決這個問題對我來說非常重要。 我有表是不穩定的行和列的數量,所以我把+ =操作符來創建單元格,行等現在我需要確定每個單元格,但我不明白我怎麼能做到這一點這個情況。許多元素元素的ID

function drawBoard(board) { 
var t=""; 
t="<table border: 2px >"; 
var x,y; 
for(x=0; x<board.length; x++){ 
    t+="<tr>"; 
    for(y=0; y<board.length; y++){ 
     t+="<td class='tablecell' onclick=''>X</td>" 
    } 
    t+="</tr>"; 
} 
t+="</table>"; 
} 
+1

你是什麼意思「需要識別每個細胞」? –

+0

給予他們每個人的ID – lisa

回答

0

您可以使用:

const cells = document.getElementsByClassName('tablecell') 

或者你可以收集創作階段的每一個細胞,例如:

const cells = []; 

for (let i = 0; i < board.length){ 
    for (let j = 0; j < board.length){ 
    const cell = document.createElement('td'); 
    cells.push(cell); 
    } 
} 
1

通過識別小區我假設您希望稍後在代碼的不同部分中引用它們。

你可以通過給你的行和單元格類和/或ID來實現它。

對於一個行,例如:

t += '<tr id="tr-' + x + '">'; 

用於小區

t += '<td class="tablecell tr-' + x + ' col-' + y + '" onclick="" id="td-' + x + '-' + y + '">X</td>' 

然後行可以通過#tr-x和細胞#tr-x > td來引用,並且所有特定columnd​​

作爲馬修斯Avellar提到,爲一個單元格添加了id,以防萬一您想使用引用網格上的特定單元格

+0

只有使用'tr-x'作爲ID纔會使同一行'​​'具有相同的ID,但是。您可能想要使用'x'和'y'的組合 –

+0

就在2分鐘前,我添加了輔助類'col-y',以防我們想要選擇特定類型的所有列,但確實要添加額外的'id'來創建網格將是有用的,謝謝 – Moseleyi

0

你可以設置每一個的id等於你的'y'變量。

喜歡的東西:

function drawBoard(board) { 
    var t = ""; 
    t = "<table border: 2px >"; 
    var x, y; 
    for (x = 0; x < board.length; x++) { 
    t += "<tr>"; 
    for (y = 0; y < board.length; y++) { 
     t += `<td id="table-${y}" class='tablecell' onclick=''>X</td>` 
    } 
    t += "</tr>"; 
    } 
    t += "</table>"; 
} 

使用位ES6模板文字,你可以設置配合你的ID,以你的「Y」變量,因爲它是一個遞增的數字。

+0

只有使用'y'作爲ID會使同列'​​'具有相同的ID,但。你可能想要使用'x'和'y'的組合 –