利用JQuery实现datatables插件的增加和删除行功能


Posted in Javascript onJanuary 06, 2017

在学习过程中遇到了这个利用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实现datatables插件的增加和删除行功能

以上所述是小编给大家介绍的利用JQuery实现datatables插件的增加和删除行功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 #Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 #Javascript
使用BootStrap进行轮播图的制作
Jan 06 #Javascript
BootStrap便签页的简单应用
Jan 06 #Javascript
bootstrap table实例详解
Jan 06 #Javascript
node.js发送邮件email的方法详解
Jan 06 #Javascript
利用jquery实现实时更新歌词的方法
Jan 06 #Javascript
You might like
图书管理程序(一)
2006/10/09 PHP
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
destoon二次开发入门示例
2014/06/20 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
python入门之基础语法学习笔记
2020/02/08 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Python使用Pygame绘制时钟
2020/11/29 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
技能比赛获奖感言
2014/02/14 职场文书
酒鬼酒广告词
2014/03/21 职场文书
颁奖晚会主持词
2014/03/25 职场文书
超市开店计划书
2014/09/15 职场文书
商业计划书范文
2019/04/24 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
Java如何实现树的同构?
2021/06/22 Java/Android