DOM动态构建表和addEventListener .... [英] DOM dynamically built table and addEventListener....
问题描述
这个让我疯了......
var tbl = document.createElement（" table"）;
var tbody = document .createElement（" tbody"）;
for（var i = 0; i< 10; i ++）{
var row = document.createElement（ " tr"）;
var curVAR = someCurrentValueOfArray [i];
row.addEventListener（''click''，function（e）{
alert（curVAR）;
}，false）;
var cell = document.createElement（" td"）;
var cellText = document.createTextNode（i）;
cell.appendChild（cellText）; row.appendChild（cell）;
tbody.appendChild（row）;
}
tbl.appendChild（tbody）;
document.getElementById（''tdiv''）。appendChild（tbl）;
====
现在......为什么curVAR''被'分配'到行警告功能???。
如果我点击其中一行，只有最后一个curVAR（ 10）被警告，但
i-variable很好地显示在行中0到9 ....
任何人???
提前付款...
This one is driving me nuts....
var tbl = document.createElement("table");
var tbody = document.createElement("tbody");
for(var i=0; i<10; i++) {
var row = document.createElement("tr");
var curVAR = someCurrentValueOfArray[i];
row.addEventListener(''click'', function(e) {
alert(curVAR);
}, false);
var cell = document.createElement("td");
var cellText = document.createTextNode(i);
cell.appendChild(cellText); row.appendChild(cell);
tbody.appendChild(row);
}
tbl.appendChild(tbody);
document.getElementById(''tdiv'').appendChild(tbl);
====
Now... Why isn''t the curVAR ''assigned'' to the row-alert-function???.
if I click one of the rows, only the last curVAR (10) is alerted, but the
i-variable is nicely showed 0 to 9 in the row....
Anyone???
Thanx in advance...
推荐答案
" Quarco" < do ** @ bother.itwrites：
"Quarco" <do**@bother.itwrites:
这个让我疯了......
var tbl = document.createElement（" table"）;
var tbody = document.createElement（" tbody"）;
for（var i = 0 ; i< 10; i ++）{
var row = document.createElement（" tr"）;
var curVAR = someCurrentValueOfArray [i];
row.addEventListener（''click''，function（e）{
alert（curVAR）;
}，false）;
var cell = document.createElement（" td"）;
var cellText = document.createTextNode（i）;
cell .appendChild（CELLTEXT）; row.appendChild（cell）;
tbody.appendChild（row）;
}
tbl.appendChild（tbody）;
document.getElementById（''tdiv''）。appendChild（tbl）;
====
现在......为什么curVAR''被'分配'到行警告功能???。
如果我点击其中一行，只有最后一个curVAR（ 10）被警告，但
i-variable很好地显示在行中0到9 ....
任何人???
This one is driving me nuts....
var tbl = document.createElement("table");
var tbody = document.createElement("tbody");
for(var i=0; i<10; i++) {
var row = document.createElement("tr");
var curVAR = someCurrentValueOfArray[i];
row.addEventListener(''click'', function(e) {
alert(curVAR);
}, false);
var cell = document.createElement("td");
var cellText = document.createTextNode(i);
cell.appendChild(cellText); row.appendChild(cell);
tbody.appendChild(row);
}
tbl.appendChild(tbody);
document.getElementById(''tdiv'').appendChild(tbl);
====
Now... Why isn''t the curVAR ''assigned'' to the row-alert-function???.
if I click one of the rows, only the last curVAR (10) is alerted, but the
i-variable is nicely showed 0 to 9 in the row....
Anyone???
i和curVar变量在循环中重新分配（javascript
没有块范围，只有函数范围），所以你的所有事件
处理程序正在关闭相同的curVar变量，它将在循环结束时将其作为其值的
someCurrentEtc [9]。
您需要创建一个新变量来关闭，方法是创建一个新的
范围：
（函数（curVar）{ //或者创建一个命名函数并调用它
row.addEventListener（''click''，function（e）{
alert（curVAR）;
}，false）;
}）（curVar）;
-
Joost Diepenmaat |博客： http://joost.zeekat.nl/ |工作： http://zeekat.nl/
The i and curVar variables are re-assigned in the loop (javascript
does not have block scope, only function scope), so all your event
handlers are closing over the same curVar variable, which will have
someCurrentEtc[9] as its value at the end of the loop.
You need to create a new variable to close over, by creating a new
scope:
(function(curVar) { // or make a named function and call that
row.addEventListener(''click'', function(e) {
alert(curVAR);
}, false);
})(curVar);
--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/
Quarco写道：
Quarco wrote:
>
现在......为什么curvAR''被分配''到'行警告功能???。
如果我点击其中一行，只有最后一个curVAR（10）被警告，但是
i变量是很好地在行中显示0到9 ....
>
Now... Why isn''t the curVAR ''assigned'' to the row-alert-function???.
if I click one of the rows, only the last curVAR (10) is alerted, but the
i-variable is nicely showed 0 to 9 in the row....
你可以将curVar保存为元素的属性（td / tr）：
< html>< head>< script>
window.onload = function（）{
var d = document，
anArray = [''a0''，''b1''，''c2''，''d3''，''e4''，''f5''，''g6''， ''h7''，''i8''，''j9'']，
y = function（p）{return d.createElement（p）}，
tbody = y（" tbody"），
i，cell;
for（i = 0; i< 10; i ++）{
（tbody.appendChild（y（''tr''）））。appendChild（cell = y（" td"））;
cell.innerHTML = i;
cell.curVAR = anArray [i];
cell.addEventListener（''click''，function（e）{alert（this.curVAR）}，
false ）; $
}
（d.getElementById（''tdiv''）。appendChild（y（" table"）））。appegChild（tbody ）;;
};
< / script>< / head>< body>< div id =" tdiv">< / div> < / body>< / html>
--Jorge。
You could save curVar as a property of the element ( td / tr ) :
<html><head><script>
window.onload= function () {
var d= document,
anArray= [''a0'',''b1'',''c2'',''d3'',''e4'',''f5'',''g6'',''h7'',''i8'',''j9''],
y= function (p) { return d.createElement(p) },
tbody= y("tbody"),
i, cell;
for(i= 0; i< 10; i++) {
(tbody.appendChild(y(''tr''))).appendChild(cell= y("td"));
cell.innerHTML= i;
cell.curVAR= anArray[i];
cell.addEventListener(''click'', function(e) { alert(this.curVAR) },
false);
}
(d.getElementById(''tdiv'').appendChild(y("table"))) .appendChild(tbody);
};
</script></head><body><div id="tdiv"></div></body></html>
--Jorge.
Jorge写道：
Jorge wrote:
Quarco写道：
Quarco wrote:
>现在......为什么curVAR''被'分配'到行-alert-function ???。
如果我单击其中一行，只有最后一个curVAR（10）被警告，但
i变量在行中很好地显示0到9 .. ..
>Now... Why isn''t the curVAR ''assigned'' to the row-alert-function???.
if I click one of the rows, only the last curVAR (10) is alerted, but the
i-variable is nicely showed 0 to 9 in the row....
您可以将curVar保存为元素的属性t（td / tr）：
You could save curVar as a property of the element ( td / tr ) :
推荐使用，因为这意味着要增加一个主机对象，即
容易出错。搜索档案。
PointedEars
-
现实主义：HTML 4.01严格
福音：XHTML 1.0 Strict
疯狂：XHTML 1.1作为application / xhtml + xml
- Bjoern Hoehrmann
Recommended against because that would mean augmenting a host object which
is error-prone. Search the archives.
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
这篇关于DOM动态构建表和addEventListener ....的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
