JS 动态生成表 后 ONCLICK事件的问题

rxiaoliang 2009-03-24 11:45:15
我写了以下一段代码,其中children是一个JSON对象，其数据可以理解为一个表（如下）：
id name
1 liuxl
2 liuzp

代码如下：
function insert2table(data){
eval("var children="+data);
for(j=1;j <children.length;j++){
child = children[j];
var trTemp = tableTemp.insertRow();
trTemp.className="tr2";
var str = " <input type='checkbox' name='mycheck' value='"+child.name+"'>";
trTemp.insertCell().innerHTML=str;
trTemp.insertCell().innerHTML=child.id;
trTemp.insertCell().innerHTML=child.name;
trTemp.attachEvent('onmouseover',c1);
trTemp.attachEvent('onmouseout',c2);
trTemp.attachEvent('onclick',function(){var t=name;sel(t);});
}

function c1(){
var t=event.srcElement.parentElement;
t.style.backgroundColor="#dedede";
}
function c2(){
var t=event.srcElement.parentElement;
t.style.backgroundColor="";
}


function sel(tt){
alert(tt);
}

以上代码可以正常显示出我预期的表格，可是表格的onclick事件有问题。无论点哪一行，最后的输出结果都是最后一行的值（即liuzp).
该问题太概是用变量作参数据导致，

请高手指点一下，有什么解决方法，使点相应的行即可以得到相应的值，想了很久都找不到解决方法。
...全文
256 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
caiying2009 2009-03-25
  • 打赏
  • 举报
 回复
借用jol_boy的代码：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

 </HEAD>



 <BODY>

  <script>

 



  function insert2table(){ 

    //eval("var children="+data); 

 var children = [

                {"id":1, "name":"111"},

                {"id":2, "name":"222"},

                {"id":3, "name":"333"}

              ];



    var tableTemp=document.getElementById("tableTemp");

    

    for(j=0;j <children.length;j++){ 

        child = children[j]; 

        var trTemp = tableTemp.insertRow(); 

        trTemp.className="tr2"; 

        var str = " <input type='checkbox' name='mycheck' value='"+child.name+"'>"; 

        trTemp.insertCell().innerHTML=str; 

        trTemp.insertCell().innerHTML=child.id; 

        trTemp.insertCell().innerHTML=child.name; 

        trTemp.attachEvent('onmouseover',c1); 

        trTemp.attachEvent('onmouseout',c2);

//trTemp.attachEvent('onclick',function(){var t=name;sel(t);});

(function(t){

	trTemp.attachEvent('onclick',function(){sel(t)}) 

})(child.name)



    } 

}



function c1(){ 

var t=event.srcElement.parentElement; 

t.style.backgroundColor="#dedede"; 

} 

function c2(){ 

var t=event.srcElement.parentElement; 

t.style.backgroundColor=""; 

} 



function sel(tt){ 

alert(tt); 

} 

  </script>



  <input type="button" value="test" onclick="insert2table()" />





  <table id="tableTemp"><tr style="width:100px;height:30px;background:yellow"><td>123</td></tr></table>

 </BODY>

</HTML>
caiying2009 2009-03-25
  • 打赏
  • 举报
 回复 


trTemp.attachEvent('onclick',function(){var t=name;sel(t);});

--->


(function(t){

	trTemp.attachEvent('onclick',function(){sel(t)}) 

})(child.name)

mumu_java 2009-03-25
  • 打赏
  • 举报
 回复 


...

trTemp.attachEvent('onclick',new Function("sel("+eval(child.name)+");")); 

...

试试这个.
hoojo 2009-03-25
  • 打赏
  • 举报
 回复
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<script>


function insert2table(){
//eval("var children="+data);
var children = [
{"id":1, "name":"111"},
{"id":2, "name":"222"},
{"id":3, "name":"333"}
];

var tableTemp=document.getElementById("tableTemp");

for(j=0;j <children.length;j++){
child = children[j];
var trTemp = tableTemp.insertRow();
trTemp.className="tr2";
var str = " <input type='checkbox' name='mycheck' value='"+child.name+"'>";
trTemp.insertCell().innerHTML=str;
trTemp.insertCell().innerHTML=child.id;
trTemp.insertCell().innerHTML=child.name;
trTemp.attachEvent('onmouseover',c1);
trTemp.attachEvent('onmouseout',c2);
//trTemp.attachEvent('onclick',function(){var t=name;sel(t);});
(function(t){
trTemp.attachEvent('onclick',function(){sel(t)})
})(child.name)

}
}

function c1(){
var t=event.srcElement.parentElement;
t.style.backgroundColor="#dedede";
}
function c2(){
var t=event.srcElement.parentElement;
t.style.backgroundColor="";
}

function sel(tt){
alert(tt);
}
</script>

<input type="button" value="test" onclick="insert2table()" />


<table id="tableTemp"><tr style="width:100px;height:30px;background:yellow"><td>123</td></tr></table>
</BODY>
</HTML>

这个方法可以啊
mumu_java 2009-03-25
  • 打赏
  • 举报
 回复 


...

trTemp.attachEvent('onclick',function(){var t=name;sel(t);});

...

var t=name;中的name那里定义的?
rxiaoliang 2009-03-25
  • 打赏
  • 举报
 回复
非常感谢大家提供的方法。caiying2009的方法可以。
jol_boy 2009-03-25
  • 打赏
  • 举报
 回复
仿照你的思路，做了一个，你的方法没问题！可能你的json数据格式有问题


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

 </HEAD>



 <BODY>

  <script>

 



  function insert2table(){ 

	//eval("var children="+data); 

 var children = [

				{"id":1, "name":"111"},

				{"id":2, "name":"222"},

				{"id":3, "name":"333"}

			  ];



	var tableTemp=document.getElementById("tableTemp");

	

	for(j=0;j <children.length;j++){ 

		child = children[j]; 

		var trTemp = tableTemp.insertRow(); 

		trTemp.className="tr2"; 

		var str = " <input type='checkbox' name='mycheck' value='"+child.name+"'>"; 

		trTemp.insertCell().innerHTML=str; 

		trTemp.insertCell().innerHTML=child.id; 

		trTemp.insertCell().innerHTML=child.name; 

		trTemp.attachEvent('onmouseover',c1); 

		trTemp.attachEvent('onmouseout',c2); 

		trTemp.attachEvent('onclick',function(){var t=name;sel(t);}); 

	} 

}



function c1(){ 

var t=event.srcElement.parentElement; 

t.style.backgroundColor="#dedede"; 

} 

function c2(){ 

var t=event.srcElement.parentElement; 

t.style.backgroundColor=""; 

} 





function sel(tt){ 

alert(tt); 

} 

  </script>



  <input type="button" value="test" onclick="insert2table()" />





  <table id="tableTemp"><tr style="width:100px;height:30px;background:yellow"><td>123</td></tr></table>

 </BODY>

</HTML>
zhengguoIT 2009-03-25
  • 打赏
  • 举报
 回复
(function(t){
trTemp.attachEvent('onclick',function(){sel(t)})
})(child.name)
JS中动态添加事件(绑定事件)的代码
两种方式：直接给对象添加事件,节点添加事件 例如给一个id为tab1的添加onclick事件 第一种情况： 代码如下: var t = document.getElementById(“tab1”); t.onclick = function tst(){ alert(”); } 第二种情况 代码如下: var tb = document.getElementById(“tab1”); if(window.addEventListener){ // Mozilla, Netscape, Firefox td_value.addEventListener(‘click’, alert(’1
IE8的JavaScript点击事件(onclick)不兼容的解决方法
博客园闪存分页是用JavaScript生成的，今天发现在IE8下点击页码不能翻页，翻页操作是在当前页码的onclick事件中进行的。 开始代码是这么写的： 代码如下:var a = document.createElement(“a”);a.setAttribute(“onclick”, this.ClickFunctionName + “(” + pageIndex + “);Pager.SetCurrent(” + pageIndex + “);”);由于IE8不支持setAttribute方法，这里添加的onclick事件处理程序并未添加上。 后来改为jQuery的attr方法： 代码如
js动态生成html，onclick事件无效
普通的jq点击事件是这样的 $(".aaa").click(function () { alert("测试"); }); 由于html代码是js动态生成的，所以需要用这种方式 $(document).on("click",".aaa",function(){ alert("测试"); });
解决js添加元素后onclick无效问题，解决onclick无效问题
解决js添加元素后onclick无效问题，解决onclick无效问题
html js 设置onclick,js动态添加的DIV中的onclick事件简单实例
js动态添加的DIV中的onclick事件简单实例2019-01-05编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了js动态添加的DIV中的onclick事件简单实例，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。最简单的是这样：动态添加onclick事件：如果使用匿名函数 function(){}，则如下面所示：上面的方法其实原理都一样，都是定义...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章