利用JQuery实现datatables插件的增加和删除行功能
2017-01-06 10:04
716 查看
在学习过程中遇到了这个利用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插件中的拖拽与放置实现的相册效果,可以删除和恢复
- 基于jquery插件实现拖拽删除图片功能
- 项目经验之:利用Jquery+HTML静态模版实现数据的展示及无刷新增加,修改,删除,分页操作!!!
- 利用JQuery插件 实现相册拖拽删除和弹回去的效果
- jQuery实现列表的增加和删除功能
- 利用jquery 模仿renren.com的“删除新鲜事”的功能实现
- 利用DhtmlXtree实现展现,修改,添加,删除,移动功能一棵树上实现,iframe的单个滑动条显示,包含在iframe中树节点中文内容过长问题解决
- jQuery插件Magnify放大镜实现javascript图片放大功能
- jQuery学习: 实现select multiple左右添加和删除功能
- 基于jQuery插件imgAreaSelect和ArcGIS server模仿实现百度地图的截图功能
- jQuery插件FullCalendar日程表实现可扩展Google日历功能
- 利用jQuery Form插件实现表单的ajax提交(原创)
- jQuery插件timers定时器实现javascrip定时或按钮控制功能
- Groovy应用:利用GFreeMarker为FreeMarker模板增加插件功能
- 利用jQuery Form插件实现表单的ajax提交(原创)
- jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
- jQuery插件Datepicker日期选择器实现Javascript自定义日期时间选择功能
- 利用Jquery的cropper插件实现拖动层动态头剪切(裁剪头像)图片
- jQuery插件FullCalendar日程表实现可扩展Google日历功能
- Tinymce、smarty 、jquery的融合及首行缩进功能的插件实现