javascript中为动态生成的表格添加事件
<html><head><scripttype="text/javascript">varx=newArray()x[0]="Saab"x[1]="Volvo"x[2]=...
<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中，因为涉及到循环生成。希望解答，谢谢 展开
<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中，因为涉及到循环生成。希望解答，谢谢 展开
4个回答
展开全部
你的意思是不是想，点击某一行，就在div1中显示出点击的这一行内容？
看你上面用的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="显示" />
看你上面用的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="显示" />
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你的逻辑是点击“显示”，调用displaytable（），然后用document.write（）方法动态生成表格。此时页面已经加载完毕，document.write（）方法会把原来页面上的东西清掉了重新写，所以div1没了，这里可以用innerHTML的方式生成表格：
比如：
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;
比如：
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;
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个代码是你写的吗，感觉不是，document.getElementById("div1").innerHTML这句话的意思是这个div1里面的内容等于字符串txt，div1没有消失，只是里面的内容变成了你要添加的表格
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
写这样的东西、扯淡
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
