利用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. Ajax 概念 分析 举例

    Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...

  2. const,static,extern 简介

    const,static,extern 简介 一.const与宏的区别: const简介:之前常用的字符串常量,一般是抽成宏,但是苹果不推荐我们抽成宏,推荐我们使用const常量. 执行时刻:宏是预编 ...

  3. 转：serialVersionUID作用

    汗,以前学了还忘了... Java的序列化机制是通过在运行时判断类的serialVersionUID来验证版本一致性的.在进行反序列化时,JVM会把传来的字节流中的serialVersionUID与本 ...

  4. .NET平台开源项目速览(14)最快的对象映射组件Tiny Mapper

    好久没有写文章,工作甚忙,但每日还是关注.NET领域的开源项目.五一休息,放松了一下之后,今天就给大家介绍一个轻量级的对象映射工具Tiny Mapper:号称是.NET平台最快的对象映射组件.那就一起 ...

  5. [C#] 走进 LINQ 的世界

    走进 LINQ 的世界 序 在此之前曾发表过三篇关于 LINQ 的随笔: 进阶:<LINQ 标准查询操作概述>(强烈推荐) 技巧:<Linq To Objects - 如何操作字符串 ...

  6. Velocity笔记--使用Velocity获取动态Web项目名的问题

    以前使用jsp开发的时候,可以通过request很轻松的获取到根项目名,现在换到使用velocity渲染视图,因为已经不依赖servlet,request等一些类的环境,而Web项目的根项目名又不是写 ...

  7. jQuery的属性

    The Write Less , Do More ! jQuery的属性 1. attr(name|properties|key,value|fn) : 设置或返回被选元素的属性值 ①获取属性 < ...

  8. 编译器开发系列--Ocelot语言4.类型定义的检查

    这里主要介绍一下检查循环定义的结构体.联合体.是对成员中包含自己本身的结构体.联合体进行检查.所谓"成员中包含自己本身",举例来说,就是指下面这样的定义. struct point ...

  9. CSS命名规范——BEM思想（非常赞的规范）

    人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符( ...

  10. Spring.Net在Mvc4.0中应用的说明

    案例Demo:http://yunpan.cn/cJ5aZrm7Uybi3 访问密码 414b Spring.Net在Mvc4.0中应用的说明 1.引用dll 2.修改Global文件 (Spring ...