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

来源：互联网发布：企业网络危机公关方案编辑：程序博客网时间：2024/05/23 13:40

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

表格图片

方法比较多，讲自己用的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>                <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(addrow);//绑定添加事件        $("#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个方法的应用。有时候很多需求看似简单，但如果不是非常熟悉，或者经常写，就会被卡住，会耽误一些时间。记录下来，以后可以使用。
多写代码，优化是条没有尽头的路
有不对的，望指点。每次写完，都担心怕误了谁家子弟。。。

阅读全文

1 0