利用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 相关文章推荐
JavaScript中的方法重载实例
Mar 16 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
浅谈js的异步执行
Oct 18 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
fetch 如何实现请求数据
Dec 20 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修改时间格式的代码
2011/05/29 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
php调用shell的方法
2014/11/05 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
详解Python高阶函数
2020/08/15 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
投资协议书范本
2014/04/21 职场文书
关于安全演讲稿
2014/05/09 职场文书
企业文明单位申报材料
2014/05/16 职场文书
庆七一活动简报
2015/07/20 职场文书
2016简单的租房合同范本
2016/03/18 职场文书