jquery實(shí)現(xiàn)表格行的上下移動(dòng)和置頂
本文實(shí)例為大家分享了jquery實(shí)現(xiàn)表格行的上下移動(dòng)和置頂?shù)木唧w代碼,供大家參考,具體內(nèi)容如下
先上效果圖:
點(diǎn)擊上移、下移、置頂,可以實(shí)現(xiàn)對(duì)應(yīng)的效果。
上代碼:
<td> ? ? <a href="javascript:" data-opt="delete" class="layui-btn layui-btn-mini layui-btn-danger">刪除</a> ? ? {{# if(index > 0){ }} ?//layui的模板語法 ? ? <a href="javascript:" data-opt="moveup" class="layui-btn layui-btn-mini">上移</a> ? ? <a href="javascript:" data-opt="movetop" class="layui-btn layui-btn-mini">置頂</a> ? ? <a href="javascript:" data-opt="movedown" style="display: none;" class="layui-btn layui-btn-mini">下移</a> ? ? {{# } else if(index ==0){ }} ? ? <a href="javascript:" data-opt="movedown" ?class="layui-btn layui-btn-mini">下移</a> ? ? <a href="javascript:" data-opt="moveup" style="display: none;" ?class="layui-btn layui-btn-mini">上移</a> ? ? <a href="javascript:" data-opt="movetop" style="display: none;" ?class="layui-btn layui-btn-mini">置頂</a> ? ? {{# } }} </td>
$('#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('確定要?jiǎng)h除[ <span style="color:red;">' + name + '</span> ] ?', { icon: 3, title: '系統(tǒng)提示' }, 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; ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? }); ? ? }); });
我是做后臺(tái)的,js寫的可能比較 low,各位看看即可,歡迎提出修改意見。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
分享一些常用的jQuery動(dòng)畫事件和動(dòng)畫函數(shù)
在jquery中,jquery動(dòng)畫事件和動(dòng)畫函數(shù)經(jīng)常用的到,今天小編抽時(shí)間給大家整理了些關(guān)于常用的jquery動(dòng)畫事件和動(dòng)畫函數(shù),對(duì)jquery動(dòng)畫函數(shù)和動(dòng)畫事件相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-11-11JQuery select控件的相關(guān)操作實(shí)現(xiàn)代碼
JQuery獲取和設(shè)置Select選項(xiàng)方法匯總?cè)缦拢枰呐笥芽梢詤⒖枷?/div> 2012-09-09基于jQuery的判斷iPad、iPhone、Android是橫屏還是豎屏的代碼
在ipad、iphone網(wǎng)頁開發(fā)中,我們很可能需要判斷是橫屏或者豎屏。下面就來介紹如何用 jQuery 判斷iPad、iPhone、Android是橫屏還是豎屏的方法2014-05-05動(dòng)態(tài)設(shè)置form表單的action屬性的值的簡單方法
下面小編就為大家?guī)硪黄獎(jiǎng)討B(tài)設(shè)置form表單的action屬性的值的簡單方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05jquery實(shí)現(xiàn)簡單的banner輪播效果【實(shí)例】
下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)簡單的banner輪播效果【實(shí)例】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-03-03JQuery中form驗(yàn)證出錯(cuò)信息的查看方法
JQuery中form驗(yàn)證出錯(cuò),可以采用以下方式來查看具體input的出錯(cuò)信息,下面有個(gè)不錯(cuò)的示例,有類似情況的朋友可以參考下2013-10-10最新評(píng)論