JQ写动态表格

想写个动态表格，每行的ID和里面控件（input）等的ID都不同，<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实现动态表格 的建议，多谢！

解决方案 »

  1.   

    用live()方法绑定事件即可。http://api.jquery.com/live/
      

  2.   

    刚刚帮一位论坛里的小兄弟写的一个jquery 修改表格的例子，你参考一下吧<!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>
      

  3.   

    //举个简单的例子：
    <!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>
      

  4.   


    嗯，确实忘记这种方法了，不过马甲兄的方法和我常用的bind比较相似，我就优先用那个了O(∩_∩)O哈！