應(yīng)用場景:
成都創(chuàng)新互聯(lián)公司專注于融安網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供融安營銷型網(wǎng)站建設(shè),融安網(wǎng)站制作、融安網(wǎng)頁設(shè)計、融安網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù),打造融安網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供融安網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
多值排序、分類排序等操作
此代碼是經(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)方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
分享名稱:jQuery實現(xiàn)上升、下降、刪除、添加一行代碼
轉(zhuǎn)載來于:http://muchs.cn/article28/ipggcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗、建站公司、、自適應(yīng)網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站營銷
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)