利用JS实现页面删除并重新排序功能


Posted in Javascript onDecember 09, 2016

首先,用jqury选择器,选中勾选的行:

var cks = $("#indicator_table").find("input[type='checkbox']:checked");

然后弹出一个确认是否删除框,为是否删除框中的确定绑定一个delInd()事件;

先在页面把选中的那一行,remove或者html(“ ”)掉,

$("#indicator_table").find("input[type='checkbox']:checked").each(function(i, o){
// 获取checkbox所在行的顺序 
n = $(this).parents("tr").index();
$("#indicator_table").find("tr:eq(" + n + ")").remove();
});
$("#deleteModal").modal("hide");

在对剩下的行重新排序,又需要jqury选择器,选中表格的行,并进行循环赋值:

$("#indicator_table").find("tr").each(function(i){
$(this).find("td").eq(10).find("a").text(i+1);
});

以上所述是小编给大家介绍的利用JS实现页面删除并重新排序功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现的tab标签切换效果代码分享
Aug 25 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
Html5生成验证码的示例代码
May 10 Javascript
Bootstrap table使用方法详细介绍
Dec 09 #Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 #Javascript
任意Json转成无序列表的方法示例
Dec 09 #Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 #Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 #Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 #Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 #Javascript
You might like
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
asp 取文本框名称代码
2008/12/02 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
js尾调用优化的实现
2019/05/23 Javascript
js实现列表按字母排序
2020/08/11 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
Python实现多线程下载文件的代码实例
2014/06/01 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
Python subprocess库的使用详解
2018/10/26 Python
Python中的枚举类型示例介绍
2019/01/09 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
教师找工作推荐信
2013/11/23 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
热情服务标语
2014/10/07 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL