Jquery表格行动态增加与删除实例

来源:网络整理作者:网友投稿发布时间:2020-12-29 21:00

本文介绍了jquery实现表格行的动态与删除的方法，jquery表格操作实例代码，有需要的朋友参考下。...

例子，jquery实现表格行的动态添加与删除。

复制代码代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src=http://www.jquerycn.cn/a_14442/"js/jquery-1.6.1.min.js"></script>
<title>表格行的动态添加与删除--</title>
<script>
    $(document).ready(function(){
        //<tr/>居中
        $("#tab tr").attr("align","center");

        //增加<tr/>
        $("#but").click(function(){
            var _len = $("#tab tr").length;
            $("#tab").append("<tr id="+_len+">"
                                +"<td>"+_len+"</td>"
                                +"<td>Dynamic TR"+_len+"</td>"
                                +"<td><input type='text' /></td>"
                                +"<td><a href=http://www.jquerycn.cn/a_14442/\'#\' onclick=http://www.jquerycn.cn/a_14442/\'deltr("+_len+")\'>删除</a></td>"
                            +"</tr>");
        })
    })

    //删除<tr/>
   var deltr =function(index)
    {
        var _len = $("#tab tr").length;
        $("tr[id='"+index+"']").remove();//删除当前行
        for(var i=index+1,j=_len;i<j;i++)
        {
            var nextTxtVal = $("#desc"+i).val();
            $("tr[id=http://www.jquerycn.cn/a_14442/\'"+i+"\']")
                .replaceWith("<tr id="+(i-1)+">"
                                +"<td>"+(i-1)+"</td>"
                                +"<td>Dynamic TR"+(i-1)+"</td>"
                                +"<td><input type='text' value='"+nextTxtVal+"'/></td>"
                                +"<td><a href=http://www.jquerycn.cn/a_14442/\'#\' onclick=http://www.jquerycn.cn/a_14442/\'deltr("+(i-1)+")\'>删除</a></td>"
                            +"</tr>");
        }

    }
</script>
</head>
<body>
    <table id="tab" border="1" width="80%" align="center" style="margin-top:40px">
        <tr>
            <td width="30%">序号</td>
            <td>标题</td>
            <td>描述</td>
            <td>操作</td>
       </tr>
    </table>
    <div style="border:2px;
                border-color:#00CC00;
               margin-left:20%;
                margin-top:20px">
        <input type="button" id="but" value="增加"/>
    </div>
</body>
</html>