JQuery動(dòng)態(tài)添加和刪除表格行的方法

    這篇文章主要介紹了JQuery動(dòng)態(tài)添加和刪除表格行的方法,實(shí)例分析了jQuery中動(dòng)態(tài)操作表格行的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    本文實(shí)例講述了JQuery動(dòng)態(tài)添加和刪除表格行的方法。分享給大家供大家參考。具體分析如下：
    昨天做頁(yè)面表格行動(dòng)態(tài)添加和刪除，看了無(wú)數(shù)的介紹，發(fā)現(xiàn)了一個(gè)好東東，JQuery。用它實(shí)現(xiàn)起來(lái)還真的是很方便，這個(gè)是我用到我們平臺(tái)的一個(gè)方法。
    代碼如下:
    //記錄添加行數(shù)
    var areaCount=1;
    //記錄實(shí)際表格行數(shù)
    var rowCount=1;
    //刪除模板html
    var delRowTemplete = "<td><a href='javascript:void(0);' class='content_del' onclick='deleteBatchRow(this)'>刪除</a></td>";
    //表格行模板
    var addRowTemplete= "";
    $(function(){
    //首先取出需要克隆的模板，模板行<tr>id為rowTemplete_0
    addRowTemplete= $("#rowTemplete_0").html();
    });
    //增加行
    function addBatchRow(type){
    var templete = $("<tr id='rowTemplete_"+areaCount+"'></tr>");
    //遞增序號(hào)，替換掉tr或者td中存在[0]、_0或者(0)防止id相同,這么設(shè)計(jì)主要是為了后臺(tái)取值時(shí)方便
    templete = templete.append(addRowTemplete.replace(/\[0\]/g,"["+areaCount+"]").replace(/_0/g,"_"+areaCount).
    replace("processStat(\"0\")","processStat("+areaCount+")"));
    //找到最后一條存在的行,在其后拼接一行
    var flag = false;
    for(var i=areaCount-1;i>=0;i--){
    if($("#rowTemplete_"+i).length>0){ $("#rowTemplete_"+i).after(templete.append(delRowTemplete));
    break;}
    }
    //計(jì)數(shù)加一
    areaCount++; rowCount++;
    }
    //刪除行
    function deleteBatchRow(obj){
    if(rowCount>1) {
    $(obj).parents("tr").remove();
    rowCount--;
    } else alert("至少保留一行");//如果全部刪除了，那么也就沒(méi)有辦法再添加行了，模板行也被刪了呀
    }
    //取得條數(shù)
    function getAreaCount(){
    return rowCount;
    }
    后臺(tái)使用的也是比較容易的，在FormBean里面定義數(shù)組變量來(lái)get和set，很方便的。
    希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。