JQ写动态表格
想写个动态表格，每行的ID和里面控件（input）等的ID都不同，
- HTML code
<tr id="tr1" class="tr"> <td id="td1"></td></tr><tr id="tr2" class="tr"> <td id="td1"></td></tr>
动态生成了字符串
<tr id="tr2" class="tr">
<td id="td1"></td>
</tr>
用来直接生成表单，但是用这种方法会导致JS中绑定的事件复制不过来，每次生成一个新的tr都要重新绑定一次，有没有什么好的办法能避免？
补充：目前希望先生成字符串，从字符串直接得到表单，而不是先clone这个tr再修改属性，因为个人感觉修改属性比较乱……会把自己绕晕，希望大家提供些 JS实现动态表格 的建议，多谢！
[解决办法]
刚刚帮一位论坛里的小兄弟写的一个jquery 修改表格的例子，你参考一下吧
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery 修改表格</title><script type="text/javascript" src="jquery-1.6.4.min.js" ></script></head><body><table id="table1"><tr><th>姓名</th><th>年龄</th><th>操作</th></tr><tr><td>ss</td><td>1</td><td><input type="button" value="delete" onclick="var tr=this.parentNode.parentNode;tr.parentNode.removeChild(tr);" /></td></tr></table>行号<input id="rowindex" />姓名<input id="username" />年龄<input id="age" /><input type="button" value="保存" id="save" /><script type="text/javascript" > $("#save").click(function() { if ($("#rowindex").val() == "") {//新增行 $("<tr><td>" + $("#username").val() + "</td><td>" + $("#age").val() + "</td><td><input type='button' value='修改' /><input type='button' value='删除' /></td></tr>").appendTo($("#table1")).find("input[type=button]").each(function() { $(this).click(function() { if ($(this).val() == "删除") { if (window.confirm("你确定要删除这一行吗")) { $(this).parent().parent().remove(); } } if ($(this).val() == "修改") { var tr = $(this).parent().parent()[0]; $("#username").val(tr.cells[0].innerHTML); $("#age").val(tr.cells[1].innerHTML); $("#rowindex").val($(tr).index()); } }); //click }); //apend each } //if else {//更新行 var tr = $("#table1 tr").eq($("#rowindex").val())[0]; tr.cells[0].innerHTML = $("#username").val(); tr.cells[1].innerHTML = $("#age").val(); } }); //click </script></body></html>
[解决办法]
//举个简单的例子：
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script><script type="text/javascript">$(document).ready( function() { $("#tbl tr").live('click', function() { $(this).css('background-color', 'red'); });});</script></head><body><table id="tbl"></table><input type="button" id="btn" value="插入表格行" /><script type="text/javascript">$("#btn").click( function() { var html = '<tr><td style="width:200px;">CLICK ME!</td></tr>'; $("#tbl").html(html);});</script></body></html>
[解决办法]
父级绑定事件，在父级事件中判断触发源