关于用jquery 动态增加、删除表格的行，列操作。

最新推荐文章于 2025-05-19 15:18:43 发布

Bug布道师

最新推荐文章于 2025-05-19 15:18:43 发布

阅读量1.3w

点赞数 6

CC 4.0 BY-SA版权

分类专栏：技术开发问题编程学习文章标签： jquery 方法-技巧与案例

本文链接：https://blog.youkuaiyun.com/u013100581/article/details/74454927

技术同时被 3 个专栏收录

46 篇文章

订阅专栏

编程学习

32 篇文章

订阅专栏

开发问题

26 篇文章

订阅专栏

本文介绍了两种不依赖插件的手动实现网页表格行增删的方法：一是直接在表格后添加行，二是使用jQuery的clone方法复制行。这两种方法简便实用，适用于网页开发中常见的表格操作场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候会遇到类似的增加删除行的功能，如果不用插件之类的，手写的话，还要百度找攻略：

表格图片

方法比较多，讲自己用的2个方法：

下面是测试页面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>动态添加表格行、列</title>
        <style type="text/css">
            table.table {
                font-family: verdana,arial,sans-serif;
                font-size:11px;
                color:#333333;
                border-width: 1px;
                border-color: #666666;
                border-collapse: collapse;
            }
            table.table th {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                font-size:14px;
                border-color: #666666;
                background-color: #dedede;
                line-height:20px;
            }
            table.table td {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #666666;
                background-color: #ffffff;
                line-height:18px;
            }
</style>
    </head>
<body>
    <table class="table">
        <thead>
            <tr>
                <th>列1</th>
                <th>列2</th>
                <th>列3</th>
                <th>列4</th>
                <th>列5</th>
                <th>列6</th>
            </tr>
        </thead>
        <tbody id="trlist">
            <tr id="tr">
                <td><input type="checkbox" name="checkbox"/></td>
                <td><input type="text"/></td>
                <td><input type="text"/></td>
                <td><input type="text"/></td>
                <td><input type="text"/></td>
                <td><input type="text"/></td>
            </tr>
        </tbody>
    </table>
    <div>
        <input type="button" id="addrow" value="新增" />
        <input type="button" id="removerow" value="删除" />
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    </body>
</html>

一、直接在表格后添加一行：

将js放入jquery后面。 这个是直接加载页面的时候。用js获取到tr的document文本，然后直接在tr后面直接添加。
关于添加行的位置，可以用insertBefore，insertAfter，after，appendTo等，jquery的方法，看需求自己定。想在哪里添加行都可以。

<script type="text/javascript">
    $(function(){
        $("#addrow").click(addrow);//绑定添加事件
        $("#removerow").click(removerow);//绑定删除事件。
    });
    
    var trlisthtml = $("#trlist").html();//获取默认的一行tr，用作复制
    function addrow(){//增加
        $(".table>tbody:last").append(trlisthtml);//向tbody最后添加一行tr.
    }
    
    function removerow(){//移除
        $('input[name="checkbox"]:checked').each(function(){
		    $(this).parent().parent().remove();//移除当前行 checkbox的父级是td，td的父级是tr，然后删除tr。就ok了。用each，选择多行遍历删除
        });
    }
    </script>

二、用jquery的clone方法：

方法都是很简单的，但是有时候想不到。每写一个方法，就会发现一个新方法。越优化，越舒服。

<script type="text/javascript">
    $(function(){
        $("#addrow").click(cloneaddrow);//绑定添加事件
        $("#removerow").click(removerow);//绑定删除事件。
    });
    
   function cloneaddrow(){
        $(".table>tbody:last").append($("#tr").clone());//复制tr，并且添加
    }
    
    function removerow(){//移除
        $('input[name="checkbox"]:checked').each(function(){
		    $(this).parent().parent().remove();//移除当前行 checkbox的父级是td，td的父级是tr，然后删除tr。就ok了。用each，选择多行遍历删除
        });
    }
    </script>