动态增加网页table行的有关问题
日期：2014-05-16 浏览次数：20328 次
动态增加网页table行的问题，请教高手
现在我想动态增加表格的行，使用
var row = tbody.insertRow()函数，可以实现。
现在想在每一行加一个onclick事件，执行一个函数，从网上查到可以用如下办法：
function test() {
alert( "aaaaa ");
}
var row = tbody.insertRow()
row.onclick = test;
但是，我现在想执行一个带参数的函数，就是上面的test函数带参数，如下：
function test(str) {
alert(str);
}
var row = tbody.insertRow()
row.onclick = test(i);
可是这样好像不行，请问高手，能否实现这样的函数？
感激涕零！
------解决方案--------------------
To：saillovemeng
function test(str) {
alert(str);
}
var row = tbody.insertRow()
row.onclick = function(){test(i);};
---------------------------------------------
这个可以正确的给row的onclick绑定带参数的函数，但有个问题，如方便，请运行如下页面看效果，你可能会发现，绑定的参数都变成了最后一次绑定的内容，不晓得是为什么？
-----------------------------------
<html>
<script language=javascript>
function test()
{
for(var i=0;i <10;i++)
{
var tr = document.all.tb.insertRow();
var td = tr.insertCell();
td.innerHTML = "这是第 "+i+ "行 ";
tr.onclick = function(){myfunc(i,td);};
}
}
function myfunc(str,td)
{
alert(str+ ": "+td.innerHTML);
}
</script>
<body>
<input type=button value=test onclick=test()> <br>
<table id=tb width=200 border=1>
<tr> <td bgcolor=yellow> 这里是表头部分 </td> </tr>
</table>
</body>
</html>
-----------------------------------
------解决方案--------------------
<html>
<script language=javascript>
function test()
{
alert( ' ')
for(var i=0;i <10;i++)
{
var tr = document.getElementById( "tb ").insertRow();
var td = tr.insertCell();
td.innerHTML = "aa "+i+ "hang ";
tr.onclick = (function (i,td){return function(){myfunc(i,td);}})(i,td)
}
}
function myfunc(str,td)
{
alert(str+ ": "+td.innerHTML);
}
</script>
<body>
<input type=button value=test onclick= "test() "> <br>
<table id=tb width=200 border=1>
<tr> <td bgcolor=yellow> 1111111111 </td> </tr>
</table>
</body>
</html>
查查闭包
现在我想动态增加表格的行，使用
var row = tbody.insertRow()函数，可以实现。
现在想在每一行加一个onclick事件，执行一个函数，从网上查到可以用如下办法：
function test() {
alert( "aaaaa ");
}
var row = tbody.insertRow()
row.onclick = test;
但是，我现在想执行一个带参数的函数，就是上面的test函数带参数，如下：
function test(str) {
alert(str);
}
var row = tbody.insertRow()
row.onclick = test(i);
可是这样好像不行，请问高手，能否实现这样的函数？
感激涕零！
------解决方案--------------------
To：saillovemeng
function test(str) {
alert(str);
}
var row = tbody.insertRow()
row.onclick = function(){test(i);};
---------------------------------------------
这个可以正确的给row的onclick绑定带参数的函数，但有个问题，如方便，请运行如下页面看效果，你可能会发现，绑定的参数都变成了最后一次绑定的内容，不晓得是为什么？
-----------------------------------
<html>
<script language=javascript>
function test()
{
for(var i=0;i <10;i++)
{
var tr = document.all.tb.insertRow();
var td = tr.insertCell();
td.innerHTML = "这是第 "+i+ "行 ";
tr.onclick = function(){myfunc(i,td);};
}
}
function myfunc(str,td)
{
alert(str+ ": "+td.innerHTML);
}
</script>
<body>
<input type=button value=test onclick=test()> <br>
<table id=tb width=200 border=1>
<tr> <td bgcolor=yellow> 这里是表头部分 </td> </tr>
</table>
</body>
</html>
-----------------------------------
------解决方案--------------------
<html>
<script language=javascript>
function test()
{
alert( ' ')
for(var i=0;i <10;i++)
{
var tr = document.getElementById( "tb ").insertRow();
var td = tr.insertCell();
td.innerHTML = "aa "+i+ "hang ";
tr.onclick = (function (i,td){return function(){myfunc(i,td);}})(i,td)
}
}
function myfunc(str,td)
{
alert(str+ ": "+td.innerHTML);
}
</script>
<body>
<input type=button value=test onclick= "test() "> <br>
<table id=tb width=200 border=1>
<tr> <td bgcolor=yellow> 1111111111 </td> </tr>
</table>
</body>
</html>
查查闭包
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
