利用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. Linux下Nodejs安装（完整详细）

    之前安装过windows下以及Mac下的node,感觉还是很方便的,不成想今天安装linux下的坑了老半天,特此记录. 首先去官网下载代码,这里一定要注意安装分两种,一种是Source Code源码, ...

  2. Oracle Database 12c Data Redaction介绍

    什么是Data Redaction Data Redaction是Oracle Database 12c的高级安全选项之中的一个新功能,Oracle中国在介绍这个功能的时候,翻译为“数据编纂”,在EM ...

  3. DataTable 转换成 Json的3种方法

    在web开发中,我们可能会有这样的需求,为了便于前台的JS的处理,我们需要将查询出的数据源格式比如:List<T>.DataTable转换为Json格式.特别在使用Extjs框架的时候,A ...

  4. AFNetworking 3.0 源码解读（十一）之 UIButton/UIProgressView/UIWebView + AFNetworking

    AFNetworking的源码解读马上就结束了,这一篇应该算是倒数第二篇,下一篇会是对AFNetworking中的技术点进行总结. 前言 上一篇我们总结了 UIActivityIndicatorVie ...

  5. c#语言规范

    0x00 分类 C#语言规范主要有两个来源,即我们熟知的ECMA规范和微软的规范.尽管C#的ECMA规范已经前后修订4次,但其内容仅仅到C# 2.0为止.所以慕容为了方便自己和各位方便查询,在此将常见 ...

  6. javascript动画系列第一篇——模拟拖拽

    × 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...

  7. bash字符串操作

    参考 http://www.cnblogs.com/chengmo/archive/2010/10/02/1841355.html 问题:bash怎么提取字符串的最后一位?例如python中strin ...

  8. springmvc SSM shiro redis 后台框架 多数据源 代码生成器

    A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单 下载地址    ; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类 ...

  9. 仿陌陌的ios客户端+服务端源码项目

    软件功能:模仿陌陌客户端,功能很相似,注册.登陆.上传照片.浏览照片.浏览查找附近会员.关注.取消关注.聊天.语音和文字聊天,还有拼车和搭车的功能,支持微博分享和查找好友. 后台是php+mysql, ...

  10. django 第三天 有关库使用

    项目中经常会用到第三方的lib和app,有些lib和app会进行不断更新,更新后可能会存在冲突,因此可以创建externals目录,下面欧app和libs.app存放django-cms,haysta ...