利用JQuery实现datatables插件的增加和删除行操作

在学习过程中遇到了这个利用JQuery对表格行的增加和删除，特记录下来以供初学者参考。

下面是主要的代码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>zengjia he shancu </title>

    <meta charset="utf-8" />

    <script src="../jsPanel-3.5.0/jquery-3.1.1.min.js"></script>

    <script src="../DataTables/js/js/jquery.dataTables.min.js"></script>

    <link href="../DataTables/js/css/jquery.dataTables.min.css" rel="stylesheet" />

    <script type="text/javascript">

        $(document).ready(function () {

            $("#table").DataTable()

        });

        var i = 0;

        //添加行

        function addRow() {

            i++;

            var rowTem = '<tr class="tr_' + i + '">'

                + '<td><input type="Text" id="txt' + i + '" /></td>'

                + '<td><input type="Text" id="pwd' + i + '"/></td>'

                + '<td><a href="#" onclick=delRow('+i+') >删除</a></td>'

                + '</tr>';

           //var tableHtml = $("#table tbody").html();

           // tableHtml += rowTem;

              $("#table tbody:last").append(rowTem);

          //  $("#table tbody").html(tableHtml);

        }

        //删除行

        function delRow(_id) {

            $("#table .tr_"+_id).hide();

            i--;

        }

        //进行测试

        function ceshi() {

            var str1 = '';

            for( var j=1;j<=i;j++){

                var str = $("#" + "txt" + j).val();

                str1 += str;

            }

            alert(str1);

        }

    </script>

</head>

<body>

    <div style="width:500px">

        <table id="table" border="1" width="500px" class="display  hover cell-border  border-blue-1" >

            <tr width="150px">

                <th width="70px">用户名</th>

                <th width="70px">密码</th>

                <th width="30px">操作</th>

            </tr>

        </table>

    </div>

    <input type="button" value="添加行" onclick="addRow();" />

    <input type="button" value="测试数据" onclick="ceshi();" />

</body>

</html>

运行的截图如下：

JQuery实现表格的增加行和删除行的更多相关文章

  1. Jquery动态增加行和删除行

    $("#add_5").click(function(){ var str_1="<tr> <td><input type=\"t ...

  2. 超级简单的jquery操作表格(添加/删除行、添加/删除列)

    利用jquery给指定的table添加一行.删除一行 <script language="javascript" src="./jquery.js"> ...

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

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

  4. jQuery表格自动增加

    <!DOCTYPE html> <html dir="ltr" lang="zh-CN"> <head> <meta ...

  5. jQuery 选择表格(table)里的行和列及改变简单样式

    本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...

  6. jQuery动态表格插件 AppendGrid

    AppendGrid是一个jQuery动态表格插件,提供像填写电子表格数据一样在页面去输入结构化数据. 它允许用户在表格里增加/删除/插入/删除行,控制input/select/textarea 提交 ...

  7. js如何实现动态的在表格中添加和删除行？（两种方法）

    js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...

  8. 使用jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...

  9. JQuery合并表格单元格

    转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格   一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...

随机推荐

  1. ASP.NET Aries 入门开发教程9：业务表单的开发

    前言: 经过前面那么多篇的列表的介绍,终于到了大伙期待的表单开发了. 也是本系列的最后一篇文章了! 1:表单页面的权限设置与继承 对于表单页面,权限的设置有两种: 1:你可以选择添加菜单(设置为不显示 ...

  2. 领域驱动和MVVM应用于UWP开发的一些思考

    领域驱动和MVVM应用于UWP开发的一些思考 0x00 起因 有段时间没写博客了,其实最近本来是根据梳理的MSDN上的资料(UWP开发目录整理)有条不紊的进行UWP学习的.学习中有了心得体会或遇到了问 ...

  3. 【深入浅出jQuery】源码浅析--整体架构

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  4. Objective-C中block的底层原理

    先出2个考题: 1. 上面打印的是几,captureNum2 出去作用域后是否被销毁?为什么? 同样类型的题目: 问:打印的数字为多少? 有人会回答:mutArray是captureObject方法的 ...

  5. android studio 使用 jni 编译 opencv 完整实例 之 图像边缘检测！从此在andrid中自由使用 图像匹配、识别、检测

    目录: 1,过程感慨: 2,运行环境: 3,准备工作: 4,编译 .so 5,遇到的关键问题及其解决方法 6,实现效果截图. (原创:转载声明出处:http://www.cnblogs.com/lin ...

  6. 来吧，HTML5之基础标签(上)

    什么是html5 HTML 5 是下一代的 HTML.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 学习过程中标签的理解 <a>标签  定义超链接, ...

  7. MyBatis基础入门--知识点总结

    对原生态jdbc程序的问题总结 下面是一个传统的jdbc连接oracle数据库的标准代码: public static void main(String[] args) throws Exceptio ...

  8. mount报错： you must specify the filesystem type

    在linux mount /dev/vdb 到 /home 分区时报错: # mount /dev/vdb /homemount: you must specify the filesystem ty ...

  9. 【从零开始学BPM，Day4】业务集成

    [课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第四天课程] 1.课程概要 Step 1 软件下载:H3 BP ...

  10. swift 中关于open ,public ,fileprivate,private ,internal,修饰的说明

    关于 swift 中的open ,public ,fileprivate,private, internal的区别 以下按照修饰关键字的访问约束范围 从约束的限定范围大到小的排序进行说明 open,p ...