jQuery實(shí)現(xiàn) 上升、下降、刪除、添加一行代碼
應(yīng)用場景:
多值排序、分類排序等操作
此代碼是經(jīng)過實(shí)踐后,實(shí)現(xiàn)方法簡潔,而且不會(huì)丟失(js添加一行人工填入的Input值)input值
依賴Jquery,不依賴其它擴(kuò)展
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("確定要?jiǎng)h除該屬性?")) {
$(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());
});
}
實(shí)現(xiàn)效果

以上所述是小編給大家介紹的jQuery實(shí)現(xiàn) 上升、下降、刪除、添加一行代碼的實(shí)現(xiàn)方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
jquery禁止輸入數(shù)字以外的字符的示例(純數(shù)字驗(yàn)證碼)
這篇文章主要介紹了jquery禁止輸入數(shù)字以外的字符的示例(純數(shù)字驗(yàn)證碼),需要的朋友可以參考下2014-04-04
jQuery ctrl+Enter shift+Enter實(shí)現(xiàn)代碼
jQuery中對(duì)鍵盤事件進(jìn)行了修正 調(diào)用函數(shù)的時(shí)候傳入事件即可。2010-02-02
jQuery實(shí)現(xiàn)簡單的tab標(biāo)簽頁效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的tab標(biāo)簽頁效果,涉及jQuery簡單元素遍歷與樣式動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
Jquery 數(shù)組操作大全個(gè)人總結(jié)
jQuery的數(shù)組處理,便捷,功能齊全. 最近的項(xiàng)目中用到的比較多,最近時(shí)間緊迫,今天抽了些時(shí)間回過頭來看 jQuery中文文檔順便對(duì)jQuery數(shù)組做個(gè)總結(jié)2013-11-11
使用jQuery插件創(chuàng)建常規(guī)模態(tài)窗口登陸效果
隱藏模態(tài)窗口技術(shù)是一種很好的解決方案,用于處理不是特有必要出現(xiàn)在網(wǎng)頁上的界面元素,下面與大家分享下如何利用jQuery插件leanModal建立一個(gè)常規(guī)模態(tài)窗口2013-08-08
jquery EasyUI的formatter格式化函數(shù)代碼
以下實(shí)例格式化數(shù)據(jù)表格中的一列。如果金額小于20時(shí)使用自定義的格式器將文本變成紅色。2011-01-01

