網站首頁 編程語言 正文
本文實例為大家分享了jquery實現表格行的上下移動和置頂的具體代碼,供大家參考,具體內容如下
先上效果圖:
點擊上移、下移、置頂,可以實現對應的效果。
上代碼:
? ? 刪除 ? ? {{# if(index > 0){ }} ?//layui的模板語法 ? ? 上移 ? ? 置頂 ? ? 下移 ? ? {{# } else if(index ==0){ }} ? ? 下移 ? ? 上移 ? ? 置頂 ? ? {{# } }}
$('#content').children("tr").each(function (index) {
? ? var $that_tr=$(this);
? ? var diseaseDoctorId=$that_tr.data("id");
? ? ? $that_tr.children("td:last-child").children("a").each(function () {
? ? ? ? ? var $that_a=$(this);
? ? ? ? ? var action=$that_a.data("opt");
? ? ? ? ? ?$that_a.on('click',function (e) {
? ? ? ? ? ? ?switch (action){
? ? ? ? ? ? ? ?case 'delete':
? ? ? ? ? ? ? ?var name = $that.parent('td').siblings('td[data-field=name]').text();
? ? ? ? ? ? ? ? //詢問框
? ? ? ? ? ? ??layerTips.confirm('確定要刪除[ ' + name + ' ] ?', { icon: 3, title: '系統提示' }, function (index) {
? ? ? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? ? ? ?url:'<%=staticPath%>/doctor/diseaseDoctor/delere/'+diseaseDoctorId,
? ? ? ? ? ? ? ? ? ? ? ? ?type:'get',
? ? ? ? ? ? ? ? ? ? ? ? ? dataType:'json',
? ? ? ? ? ? ? ? ? ? ? ? ? success:function (result) {
? ? ? ? ? ? ? ? ? ? ? ? ? ?if (result.code==200) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?layer.msg("刪除成功");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?location.reload();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?else
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?layer.msg("刪除失敗");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ? ?error:function (result) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?layer.msg("刪除失敗");
? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ? ? ? ? ? ? ?break;
? ? ? ? ? ? ? ? ? ? ? ?case 'moveup':
? ? ? ? ? ? ? ? ? ? ? ? ? ?console.log("上移");
? ? ? ? ? ? ? ? ? ? ? ? ? ?var prev=$that_a.parents("tr").prev();
? ? ? ? ? ? ? ? ? ? ? ? ? ?var prevIndex=$(prev).index('tr');
? ? ? ? ? ? ? ? ? ? ? ? ? ?$that_a.parents("tr").insertBefore(prev);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?if(prevIndex==1){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$that_a.prop("style","display:none");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$that_a.siblings("a[data-opt=movetop]").prop("style","display:none");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$that_a.siblings("a[data-opt=movedown]").prop('style','display:');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(prev).children("td:last-child").find("a[data-opt=movedown]").prop("style","display:none");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(prev).children("td:last-child").find("a[data-opt=moveup]").prop("style","display:");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(prev).children("td:last-child").find("a[data-opt=movetop]").prop("style","display:");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? ?break;
? ? ? ? ? ? ? ? ? ? ? ?case 'movetop':
? ? ? ? ? ? ? ? ? ? ? ? ? ?console.log("置頂");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var first=$that_a.parents("tr").siblings("tr:first");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$that_a.parents("tr").insertBefore(first);
? ? ? ? ? ? ? ? ? ? ? ? ? ?$(first).children("td:last-child").find("a[data-opt=movedown]").prop("style","display:none");
? ? ? ? ? ? ? ? ? ? ? ? ? ?$(first).children("td:last-child").find("a[data-opt=moveup]").prop("style","display:");
? ? ? ? ? ? ? ? ? ? ? ? ? ?$(first).children("td:last-child").find("a[data-opt=movetop]").prop("style","display:");
? ? ? ? ? ? ? ? ? ? ? ? ? ?$that_a.siblings("a[data-opt=moveup]").prop("style","display:none");
? ? ? ? ? ? ? ? ? ? ? ? ? ?$that_a.prop("style","display:none");
? ? ? ? ? ? ? ? ? ? ? ? ? ?$that_a.siblings('a[data-opt=movedown]').prop("style","display:");
? ? ? ? ? ? ? ? ? ? ? ? ? ?break;
? ? ? ? ? ? ? ? ? ? ? ?case 'movedown':
? ? ? ? ? ? ? ? ? ? ? ? ? ?console.log("下移");
? ? ? ? ? ? ? ? ? ? ? ? ? ?var next=$that_a.parents("tr").next();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$that_a.parents("tr").insertAfter(next);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$that_a.siblings("a[data-opt=moveup]").prop("style","display:");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$that_a.siblings("a[data-opt=movetop]").prop("style","display:");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$that_a.prop("style","display:none");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(next).children("td:last-child").find("a[data-opt=moveup]").prop("style","display:none");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(next).children("td:last-child").find("a[data-opt=movetop]").prop("style","display:none");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(next).children("td:last-child").find('a[data-opt=movedown]').prop("style","display:");
? ? ? ? ? ? ? ? ? ? ? ? ? ?break;
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? });
? ? });
});
我是做后臺的,js寫的可能比較 low,各位看看即可,歡迎提出修改意見。
原文鏈接:https://blog.csdn.net/zhangxiaoyang0/article/details/77677217
相關推薦
- 2022-08-27 基于Redis實現延時隊列的優化方案小結_Redis
- 2022-09-28 C++List容器常用函數接口刨析_C 語言
- 2022-06-14 python讀取查看npz/npy文件數據以及數據完全顯示方法實例_python
- 2022-08-26 docker搭建memcached的詳細步驟_docker
- 2022-06-13 詳解Python如何利用Pandas與NumPy進行數據清洗_python
- 2022-12-22 Android開發input問題解決分析_Android
- 2022-11-30 Docker容器數據卷的使用教程_docker
- 2023-07-13 自定義設置echarts label里的顏色
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支