JQ写动态表格,该如何处理-JavaSript-爱易网页

JQ写动态表格,该如何处理

日期：2014-05-16　浏览次数：20375 次

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-

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JQ写动态表格,该如何处理

相关资料更多>

推荐阅读更多>