jQuery实现表格行的动态增加与删除(改进版)

最新推荐文章于 2022-10-13 11:13:24 发布

u022731937

最新推荐文章于 2022-10-13 11:13:24 发布

阅读量189

点赞数

分类专栏： JavaScript 文章标签： jquery ViewUI

本文链接：https://blog.csdn.net/u022731937/article/details/84499172

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

[url]http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html[/url]




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $(document.body).append("" +
                    "<table id='tab' border='1' width='60%' align='center' style='margin-top:20px'>\
                        <tr>\
                            <td width='20%'>序号</td>\
                            <td>操作</td>\
                        </tr>\
                    </table>");
            $("#but").click(function(){
                var length=$("#tab tr").length;
                $("#tab").append("<tr id=tab"+length+"><td>"+length+"</td><td><input type='button' value='删除' onclick='removeLine("+length+");'></td></tr>");
            });
        })
        function removeLine(index){
            var length=$("#tab tr").length;
            $("#tab"+index).remove();
            for(var i=index+1;i<=length;i++){
                $("#tab"+i).replaceWith("<tr id=tab"+(i-1)+"><td>"+(i-1)+"</td><td><input type='button' value='删除' onclick='removeLine("+(i-1)+");'></td></tr>");
            }
        }
    </script>
</head>
<body>

<!--<table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
    <tr>
        <td width="20%">序号</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>

u022731937

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现表格行的动态增加与删除(改进版)

[url]http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html[/url][code="java"] $(function(){ $(document.body).append("" + ...
复制链接

扫一扫