Javascript獲取HTMLTableCellElement的id屬性

-1

我正在嘗試構建掃雷遊戲，使遊戲網格不在表格中。當我點擊它時，我一直在獲取爲特定單元格設置的ID。這是製作表格的代碼。Javascript獲取HTMLTableCellElement的id屬性

var table = document.createElement("table"); 
for (var k = 0; k < twoDArray.length; k++) { 
    var row = document.createElement("tr"); 
    for (var l = 0; l < twoDArray[k].length; l++) { 
     var cell = document.createElement("td"); 
     cell.textContent = twoDArray[k][l]; 
     cell.setAttribute("id", "" + k + "," + l + ""); 
     cell.setAttribute("onclick", 'clickHandler('+cell+');'); 
     row.appendChild(cell); 
    } 
    table.appendChild(row); 
} 
return document.getElementById("tableDiv").appendChild(table);

這裏是對clickHandler（）函數：

function clickHandler(cell) { 
    console.log(cell.getAttribute("id")); 
}

請，我在做什麼錯？獲取未捕獲的SyntaxError：意外的標識符錯誤。

來源

2017-09-25 Stark

'cell.setAttribute（「onclick」，...）'不是設置事件偵聽器的方法，而是使用['addEventListener']（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener）。 – Teemu

你不能用一個DOM元素有意義使用字符串連接，所以這是不正確的：

cell.setAttribute("onclick", 'clickHandler('+cell+');');

此外，沒有任何理由使用一個字符串這一點。如果你想用「簡單」事件處理，指定功能的onclick屬性：

cell.onclick = clickHandler;

使用現代事件處理，使用addEventListener：

cell.addEventListener(clickHandler);

可悲的是，舊的IE（或IE中「假裝是年老色衰」的模式，又名「兼容模式）沒有addEventListener，你必須使用attachEvent代替;見this answer如果你需要支持舊的IE /無用IE

（另一個在下面選擇）

在這兩種情況下，當處理器被調用時，你添加了處理程序到細胞通過this是可用的，所以：

function clickHandler() { 
    console.log(this.id); 
}

它也可通過currentTarget財產事件對象的收到，所以這也適用：

function clickHandler(e) { 
    console.log(e.currentTarget.id); 
}

（還有e.target，這是該事件起源 —因此，舉例來說，如果你有<td id="foo"><span>click me</span></td>並在td迷上click，如果你點擊span然後this和e.currentTarget指td和e.target指span。）

但另一種選擇對你是在每個不鉤click每td，而是把它掛在table，然後從e.target工作：

table.addEventListener("click", clickHandler);

和

function clickHandler(e) { 
    var td = e.target; 
    while (td.tagName != "TD") { 
     td = td.parentNode; 
     if (!td || td == this) { 
      return; // Click didn't pass through a td 
     } 
    } 
    console.log(td.id); 
}

備註：正如你在上面看到的，id對於id屬性的反映屬性，這樣你就可以設置的id使用屬性，以及：

cell.id = k + "," + l;

還要注意的是，"" +和+ ""在該行的原始版本是完全unnecesary;如果對數字和字符串使用+，則不管操作數的順序如何，它都會進行字符串連接，而不是加法。

來源

2017-09-25 15:27:10

非常感謝你的解釋。 addEventListener工作得很好，通過this.id獲取id！ – Stark

@Stark：參見我剛剛添加的關於'addEventListener'的說明。有一天我可以停止警告人們，但那一天不是今天。 :-) –

cell.setAttribute("onclick", 'clickHandler('+cell+');');

要轉換cell（這是一個HTML元素對象）到一個字符串（這將是"[object Object]"所以你得到的JS看起來就像這樣：

clickHandler([object Object]);

...這是JS用語法錯誤在它

你應該利用這個關鍵字代替：

cell.setAttribute("onclick", 'clickHandler(this);');

給

clickHandler(this);

當一個Click事件處理程序的情況下使用，this是被點擊的元素。

這就是說，使用JS生成一個字符串，稍後將被評估爲JS是簡單的討厭。這是一個簡單的例子，但增加了更多的複雜性，並且很快成爲錯誤和安全問題的一個很好的來源。

您應該使用addEventListener並指定一個函數。

cell.addEventListener("click", myFunction); 

function myFunction(event) { 
    clickHandler(this); 
}

（重寫clickHandler簡單地使用this可能比雖然創建一個包裝函數一個更好的選擇）。

請注意，表格單元格並非設計爲交互式控件。如果這樣使用它們，那麼對於那些不使用定點設備來與他們的計算機進行交互的人（例如許多使用屏幕閱讀器，鍵盤或呼吸開關的人）會產生問題。

在單元格內放置一個按鈕並使其成爲點擊目標通常是一個更好的主意。

來源

2017-09-25 15:37:15 Quentin

Javascript獲取HTMLTableCellElement的id屬性

回答

相關問題