應用場景:
成都創(chuàng)新互聯公司專注于融安網站建設服務及定制,我們擁有豐富的企業(yè)做網站經驗。 熱誠為您提供融安營銷型網站建設,融安網站制作、融安網頁設計、融安網站官網定制、小程序開發(fā)服務,打造融安網絡公司原創(chuàng)品牌,更為您提供融安網站排名全網營銷落地服務。
多值排序、分類排序等操作
此代碼是經過實踐后,實現方法簡潔,而且不會丟失(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("已經到頂了");
}
});
// 初始化下降按鈕
$('.sortDown').on('click', function(e) {
e.preventDefault();
var _current = $(this).parents('tr');
_current.insertAfter(_current.next());
});
}實現效果

以上所述是小編給大家介紹的jQuery實現 上升、下降、刪除、添加一行代碼的實現方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯網站的支持!
分享名稱:jQuery實現上升、下降、刪除、添加一行代碼
轉載來于:http://chinadenli.net/article28/ipggcp.html
成都網站建設公司_創(chuàng)新互聯,為您提供用戶體驗、建站公司、、自適應網站、企業(yè)網站制作、網站營銷
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯