利用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. alias导致virtualenv异常的分析和解法

    title: alias导致virtualenv异常的分析和解法 toc: true comments: true date: 2016-06-27 23:40:56 tags: [OS X, ZSH ...

  2. JS核心系列：理解 new 的运行机制

    和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...

  3. Microservice架构模式简介

    在2014年,Sam Newman,Martin Fowler在ThoughtWorks的一位同事,出版了一本新书<Building Microservices>.该书描述了如何按照Mic ...

  4. SSH实战 · 唯唯乐购项目（下）

    后台模块 一:后台用户模块 引入后台管理页面 创建adminuser表: CREATE TABLE `adminuser` (   `uid` int(11) NOT NULL AUTO_INCREM ...

  5. LeetCode-4MedianofTwoSortedArrays(C#)

    # 题目 4. Median of Two Sorted Arrays There are two sorted arrays nums1 and nums2 of size m and n resp ...

  6. 在 SAE 上部署 ThinkPHP 5.0 RC4

    缘起 SAE 和其他的平台有些不同,不能在服务器上运行 Composer 来安装各种包,必须把源码都提交上去.一般的做法,可能是直接把源码的所有文件复制到目录中,添加到版本库.不过,这样就失去了与上游 ...

  7. dubbox微服务实例及引发的“血案”

    Dubbo 是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成. 主要核心部件: Remoting: 网络通信框架 ...

  8. 走进缓存的世界（三） - Memcache

    系列文章 走进缓存的世界(一) - 开篇 走进缓存的世界(二) - 缓存设计 走进缓存的世界(三) - Memcache 简介 Memcache是一个高性能的分布式内存对象缓存系统,用于动态Web应用 ...

  9. scala练习题1 基础知识

    1, 在scala REPL中输入3. 然后按下tab键,有哪些方法可以被调用? 24个方法可以被调用, 8个基本类型: 基本的操作符, 等:     2,在scala REPL中,计算3的平方根,然 ...

  10. from表单提交数据之后，后台对象接受不到值

    如果SSH框架下,前段页面通过from表单提交数据之后,在后台对象显示空值,也就是接收不到值得情况下.首先保证前段输入框有值,这个可以在提交的时候用jQuery的id或者name选择器alert弹出测 ...