溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery實(shí)現(xiàn) 上升、下降、刪除、添加一行代碼

發(fā)布時(shí)間:2020-08-26 10:06:28 來(lái)源:腳本之家 閱讀:194 作者:mrr 欄目:web開(kāi)發(fā)

應(yīng)用場(chǎng)景:

多值排序、分類排序等操作

此代碼是經(jīng)過(guò)實(shí)踐后,實(shí)現(xiàn)方法簡(jiǎ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">&#xe679;</i>上升</a> <a class="sortDown"><i class="Hui-iconfont">&#xe674;</i>下降</a> <a class="sortDel"><i class="Hui-iconfont">&#xe609;</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) 上升、下降、刪除、添加一行代碼

以上所述是小編給大家介紹的jQuery實(shí)現(xiàn) 上升、下降、刪除、添加一行代碼的實(shí)現(xiàn)方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI