可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I am trying to create a dynamic js table and I want to give id to each cell dynamically. I want to use those ids to use in different js event handlers. How it can be done? I have tried in different ways but none of them works!
<html> <head> <style> #colors { float: right; width: 400px; height: 400px; } </style> </head> <body> <script> var d; var k = 0; function makeit() { var tbl = document.createElement("table"); var atts = document.createAttribute("style"); atts.value = "border:1px solid black;text-align:center;padding:2px;margin:3px 3px 3px 3px;"; tbl.setAttributeNode(atts); for (i = 0; i < 5; i++) { var rows = tbl.insertRow(i); for (j = 0; j < 7; j++) { d = rows.insertCell(j); d.height = "50px"; d.width = "50px"; d.style.backgroundColor = "yellow"; d.addEventListener("click", function myfunc() { d.style.backgroundColor = "red"; }); } } document.body.appendChild(tbl); } window.onload = makeit; </script> </body> </html>
回答1:
Just add
d.id = "r" + i + "c" + j;
under
d=rows.insertCell(j);
to set unique ids on each td.
Obviously, you can change the syntax r2c4 (which would be 3. row and the 5. cell) to your own liking.
If you want to call a function when clicking on a specific td you could even pass the row index (i) and column index (j) to that function.
Side note
You should consider using a JavaScript library or framework like jQuery for manipulations like this. It would facilitate your work a lot in the long term.
回答2:
The problem is a scope issue. When adding the event listener, d's reference gets updated to be the last table cell you have created.
You can simply change the event listener's function to:
function myfunc() { this.style.backgroundColor="red"; }
So that this references the object it is attached to. Depending on your intention, you may not need unique ids if you have access to the cell itself.
回答3:
Using an approach that includes wongcode's solution, you may wish to consider the following code:
<html> <head> <style> #myTbl{ border:1px solid black;text-align:center;padding:2px;margin:3px 3px 3px 3px; } #myTbl td{ width: 50px; height: 50px; background-color: yellow;} </style> </head> <body> <script> function onCellClicked(e) { this.style.backgroundColor = 'red'; } function makeit() { var tbl=document.createElement("table"); tbl.id = 'myTbl'; var curCellIndex = 0; for(i=0;i<5;i++) { var rows=tbl.insertRow(i); for(j=0;j<7;j++) { d=rows.insertCell(j); d.id = 'cell_' + curCellIndex; curCellIndex++; d.addEventListener("click",onCellClicked, false); } } document.body.appendChild(tbl); } window.onload=makeit; </script> </body> </html>
Some of the advantages include:
- Smaller html file created in your editor
- Smaller html code created in the browser
- Use of context and the this keyword
- Smaller memory consumption, since each TD doesn't contain the full body of the event handler (it only include a 'pointer' to the function to be executed)
EDIT: forgot to add code to give the cells an id. Now fixed.
