利用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 相关文章推荐
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
vue使用原生swiper代码实例
Feb 05 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
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
php生成curl命令行的方法
2015/12/14 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
php中的依赖注入实例详解
2019/08/14 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
在Python中使用HTML模版的教程
2015/04/29 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Python3离线安装Requests模块问题
2019/10/13 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
python绘制汉诺塔
2021/03/01 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
优秀大专毕业生求职信
2014/08/04 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
基层工作经验证明样本
2014/11/16 职场文书
语文教师个人工作总结
2015/02/06 职场文书
小学班长竞选稿
2015/11/20 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle