jQuery實現(xiàn) 上升、下降、刪除、添加一行代碼
應(yīng)用場景:
多值排序、分類排序等操作
此代碼是經(jīng)過實踐后,實現(xiàn)方法簡潔,而且不會丟失(js添加一行人工填入的Input值)input值
依賴Jquery,不依賴其它擴展
Javascript代碼
/*
addTableRow 為添加一行按鈕的id值
tableAttr 為table的id值
*/
$(function(){
//添加一行
$('#addTableRow').on('click',function(e){
e.preventDefault();
var _Html = '<tr><td><input type="text" placeholder="" class="input-text" value=""></td>'
+ '<td><a class="sortUp"><i class="Hui-iconfont"></i>上升</a> <a class="sortDown"><i class="Hui-iconfont"></i>下降</a> <a class="sortDel"><i class="Hui-iconfont"></i>刪除</a></td></tr>';
$('tbody', $('#tableAttr')).append(_Html);
bindEvent();
});
bindEvent();
});
function bindEvent(){
$('.sortDel,.sortUp,.sortDown').off();
$('.sortDel').on('click', function(e) {
e.preventDefault();
if (confirm("確定要刪除該屬性?")) {
$(this).parents('tr').remove();
}
});
// 初始化上升按鈕
$('.sortUp').on('click', function(e) {
e.preventDefault();
var _current = $(this).parents('tr');
if(($('tr').index(_current) - 2) >= 0) {
_current.insertBefore(_current.prev());
} else {
alert("已經(jīng)到頂了");
}
});
// 初始化下降按鈕
$('.sortDown').on('click', function(e) {
e.preventDefault();
var _current = $(this).parents('tr');
_current.insertAfter(_current.next());
});
}
實現(xiàn)效果

以上所述是小編給大家介紹的jQuery實現(xiàn) 上升、下降、刪除、添加一行代碼的實現(xiàn)方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Jquery操作radio,checkbox,select表單操作實現(xiàn)代碼
Jquery操作radio,checkbox,select表單操作實現(xiàn)代碼,需要用jquery操作表單的朋友可以參考下。2010-04-04
jQuery動態(tài)效果顯示人物結(jié)構(gòu)關(guān)系圖的方法
這篇文章主要介紹了jQuery動態(tài)效果顯示人物結(jié)構(gòu)關(guān)系圖的方法,涉及jQuery操作json結(jié)構(gòu)數(shù)據(jù)及鼠標事件的技巧,需要的朋友可以參考下2015-05-05
jQuery實現(xiàn)氣球彈出框式的側(cè)邊導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實現(xiàn)氣球彈出框式的側(cè)邊導(dǎo)航菜單效果,通過css樣式控制結(jié)合jQuery響應(yīng)鼠標事件動態(tài)切換元素樣式實現(xiàn)提示框效果,非常美觀實用,需要的朋友可以參考下2015-09-09
jQuery實現(xiàn)Table表格隔行變色及高亮顯示當前選擇行效果示例
這篇文章主要介紹了jQuery實現(xiàn)Table表格隔行變色及高亮顯示當前選擇行效果,涉及jQuery針對table元素遍歷、運算、樣式及鼠標事件動態(tài)響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
實例講解jQuery EasyUI tree中state屬性慎用
本文通過實例代碼給大家介紹jQuery EasyUI tree中state屬性慎用,切忌把state設(shè)置為closed,否則該節(jié)點會加載整個tree,形成死循環(huán)2016-04-04
jQuery插件WebUploader實現(xiàn)文件上傳
這篇文章主要為大家詳細介紹了jQuery插件WebUploader實現(xiàn)文件上傳,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11

