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

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

关于用jquery 动态增加、删除表格的行,列操作。_第1张图片

方法比较多,讲自己用的2个方法:

下面是测试页面:


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

你可能感兴趣的:(技术,开发问题,编程学习)