脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery datatables

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

 更新时间：2017年01月06日 10:04:58   作者：jquery datatables  
这篇文章给大家介绍了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实现datatables插件的增加和删除行功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • Jquery中find与each方法用法实例

    Jquery中find与each方法用法实例

    这篇文章主要介绍了Jquery中find与each方法用法,实例分析了find与each方法的功能、定义与使用技巧,需要的朋友可以参考下
    2015-02-02
  • jQuery针对input的class属性写了多个值情况下的选择方法

    jQuery针对input的class属性写了多个值情况下的选择方法

    这篇文章主要介绍了jQuery针对input的class属性写了多个值情况下的选择方法,结合实例形式对比分析了jQuery选择器针对class属性中有多个值情况下的选中方法,需要的朋友可以参考下
    2016-06-06
  • jquerymobile checkbox及时刷新才能获取其准确值

    jquerymobile checkbox及时刷新才能获取其准确值

    一般登录的时候 都有个记住用户名 记住密码 的两个checkbox 多选框用jquerymobile 做页面 ，当勾选checkbox 时总是不能获取它正确的值
    2012-04-04
  • 分享几个超级震憾的图片特效

    分享几个超级震憾的图片特效

    这次主要是来分享几个个人觉得十分震憾的图片特效，有jQuery的，有CSS3的，有很萌的乌鸦动画，也有简单朴实的图片播放动画，当然有些你可能已经看到过了，不过也没关系，你能路过就算是对我的支持了
    2012-01-01
  • JQuery实现电梯导航特效

    JQuery实现电梯导航特效

    这篇文章主要为大家详细介绍了JQuery实现电梯导航特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • jQuery实现的Div窗口震动效果实例

    jQuery实现的Div窗口震动效果实例

    这篇文章主要介绍了jQuery实现的Div窗口震动效果,可实现点击提交后窗口出现震动效果,需要的朋友可以参考下
    2015-08-08
  • Jquery表单验证失败后不提交的解决方法

    Jquery表单验证失败后不提交的解决方法

    很多人可能都会遇到在调试的时候用了return了false，可为什么还会提交呢？这个问题我最近也碰到了，尝试了多次也没有用，后来终于发现了其中的问题，下面分享处理给大家，让同样遇到这个问题的朋友们能够看看，有需要的朋友们下面来一起看看吧。
    2016-10-10
  • jquery轮播的实现方式 附完整实例

    jquery轮播的实现方式 附完整实例

    这篇文章主要介绍了jquery轮播的实现方式，文中分享了jQuery轮播完整实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • jquery获得同源iframe内body下标签的值的方法

    jquery获得同源iframe内body下标签的值的方法

    这篇文章主要介绍了jquery获得同源iframe内body下标签的值的方法,很简单，很实用，需要的朋友可以参考下
    2014-09-09
  • jQuery常用选择器详解

    jQuery常用选择器详解

    这篇文章主要为大家详细介绍了jQuery常用选择器的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论