快捷導(dǎo)航

jquery 動(dòng)態(tài)增加刪除行的簡(jiǎn)單實(shí)例(推薦)

更新時(shí)間：2016年10月12日 09:00:34 投稿：jingxian

下面小編就為大家?guī)?lái)一篇jquery 動(dòng)態(tài)增加刪除行的簡(jiǎn)單實(shí)例(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

最近寫程序，碰巧有動(dòng)態(tài)增加刪除行，下面就記錄一下

html就不寫了，也沒有什么，直接上核心了

新增行

function addRow(obj){
　　//獲得table一共有多少行，方便追加的時(shí)候給序號(hào)賦值
  var length = $("#grid tr").length;
　　//獲得當(dāng)前是第幾行，以便追加的時(shí)候，在該行下進(jìn)行新增，我這里跨的級(jí)別比較多，根據(jù)實(shí)際層級(jí)去定義
  var current = $(obj).parent().parent().parent().prevAll().length;
//   alert(current);
　　//這里主要定義需要追加的內(nèi)容，當(dāng)然要從tr開始，很簡(jiǎn)單，大家都會(huì)的
  var addContent = "";
　　//核心方法，gird是table的id，current是在第幾行后插入，addContent就是要追加的內(nèi)容了
  addTr('grid',current,addContent);
　　//這里是重新排序，將序號(hào)從1到n重新排序，碰巧我的代碼里第一個(gè)tr是不顯示的，所以就不+1了
  $("#grid tr").each(function(index){
     if(index != 0){
       $(this).children('td').eq(0).text(index);
     }
  });
}

好，下面我們看下addTr方法~~這個(gè)是在網(wǎng)上找到的，還是蠻好用的

/**
 * 為table指定行添加一行
 *
 * tab 表id
 * row 行數(shù)，如：0->第一行 1->第二行 -2->倒數(shù)第二行 -1->最后一行
 * trHtml 添加行的html代碼
 *
 */
function addTr(tab, row, trHtml){
  //獲取table最后一行 $("#tab tr:last")
  //獲取table第一行 $("#tab tr").eq(0)
  //獲取table倒數(shù)第二行 $("#tab tr").eq(-2)
  var $tr=$("#"+tab+" tr").eq(row);
  if($tr.size()==0){
    alert("指定的table id或行數(shù)不存在！");
    return;
  }
  $tr.after(trHtml);
 }

刪除行，這個(gè)就比較簡(jiǎn)單了

function deleteRow(obj){
　　//移除
   $(obj).parent().parent().parent().remove();
　　//重新排序，如果刪除的不是最后一行，不重新排序就不能看了~
   $("#grid tr").each(function(index){
     if(index != 0){
       $(this).children('td').eq(0).text(index);
     }
   });
   
}

動(dòng)態(tài)添加刪除行，就這么幾行代碼，方便大家使用

ps: $(this).prevAll().length + 1;//列

以上就是小編為大家?guī)?lái)的jquery 動(dòng)態(tài)增加刪除行的簡(jiǎn)單實(shí)例(推薦)全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章: