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

本文介绍了两种不依赖插件的手动实现网页表格行增删的方法:一是直接在表格后添加行,二是使用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>

只是2个方法的应用。有时候很多需求看似简单,但如果不是非常熟悉,或者经常写,就会被卡住,会耽误一些时间。记录下来,以后可以使用。
多写代码,优化是条没有尽头的路
有不对的,望指点。每次写完,都担心怕误了谁家子弟。。。

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值