javascript中为动态生成的表格添加事件
<html>
<head>
<script type="text/javascript">
var x = new Array()
x[0] = "Saab"
x[1] = "Volvo"
x[2] = "BMW"
</script>
</head>
<body>
<div id='div1'>点击显示出现表格：</div><br />
<script type="text/javascript">
function displaytable()
{
document.write("<table border='1'>");
for (var i=0;i<x.length;i++)
{
document.write("<tr onclick='displayInfo(" + i + ")'>");
document.write("<tr>");
document.write("<td>");
document.write(x[i]);
document.write("</td></tr>");
}
document.write("</table>");
}
function displayInfo(i)
{
txt=x[i];
document.getElementById("div1").innerHTML=txt;
}
</script>
<input name="button" type="button" onClick="displaytable();" value="显 示" />
</body>
</html>
代码如上，想实现点击“显示”出现列表，再点击列表中的具体项，出现点击项的信息。现在问题是点击“显示”后“div1”会消失。这个表格我也不会添加到div中，因为涉及到循环生成。希望解答，谢谢
看你上面用的document.write，这样执行完之后，当然只会有你添加的表格了。它是把整个文档只写上了你要的表格，其它的元素都没了，我对你的代码做了修改，如下：
<div id='div1'>点击显示出现表格：</div>
<div id='div2'></div>
<script type="text/javascript">
var x = ["Saab","Volvo","BMW"];
function displaytable(){
var arr = [];
arr.push("<table border='1'>");
for (var i=0;i<x.length;i++){
arr.push("<tr onclick='displayInfo("+ i +")'><td>"+ x[i] +"</td></tr>");
}
arr.push("</table>");
document.getElementById("div2").innerHTML = arr.join('');
}
function displayInfo(i){
document.getElementById("div1").innerHTML = x[i];
}
</script>
<input name="button" type="button" onClick="displaytable();" value="显示" />
比如：
var tableHtml = “<table border='1'>”;
for(var i=0;i<x.length;i++){
tableHtml += '<tr onclick="displayInfo(' + i + ')"><td>' + x[i] + '</td></tr>';
}
tableHtml += '</table>';
document.getElementById('div1').innerHTML = tableHTML;本回答被网友采纳
