jquery實現(xiàn)增加刪除行的方法

更新時間：2015年02月03日 10:59:56 作者：Benjamin_whx

這篇文章主要介紹了jquery實現(xiàn)增加刪除行的方法,涉及表格中行的增加與刪除技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jquery實現(xiàn)增加刪除行的方法。分享給大家供大家參考。具體分析如下：

最近做一個投票管理的模塊，需要添加問題選項，為了方便，就簡單地實現(xiàn)了表格行的添加、刪除。

注：需引入jquery.js

先上效果圖：(form中默認(rèn)有4行)

表單代碼：

<div class="oz-form-fields"  style="width:450px;padding-top: 5px">  

    <table cellpadding="0" cellspacing="0" style="width:450px;" id="optionContainer">  

        <tr id="option0">   

            <td class="oz-form-topLabel">所屬問題  

                <c:if test="${questionType=='radio'}">(單選)</c:if>  

                <c:if test="${questionType=='checkbox'}">(復(fù)選)</c:if>：  

            </td>  

            <td class="oz-property" >  

                ${question}  

            </td>  

            <td></td>  

        </tr>  

        <tr id="option1">   

            <td class="oz-form-topLabel">選項1：</td>  

            <td class="oz-property" >  

                <input type="text"  style="width:300px">  

            </td>  

            <td></td>  

        </tr>  

        <tr id="option2">   

            <td class="oz-form-topLabel">選項2：</td>  

            <td class="oz-property" >  

                <input type="text"  style="width:300px" >  

            </td>  

            <td></td>  

        </tr>  

        <tr id="option3">   

            <td class="oz-form-topLabel">選項3：</td>  

            <td class="oz-property" >  

                <input type="text"  style="width:300px">  

            </td>  

            <td></td>  

        </tr>  

        <tr id="option4">   

            <td class="oz-form-topLabel">選項4：</td>  

            <td class="oz-property" >  

                <input type="text"  style="width:300px">  

            </td>  

            <td></td>  

        </tr>  

    </table>  

    <div style="text-align: center;">  

        <a href="#" onclick="addRow()">添加一行</a>  

    </div>  

</div>

JS代碼：

復(fù)制代碼代碼如下:

var rowCount=4;  //行數(shù)默認(rèn)4行  

//添加行  

function addRow(){  

    rowCount++;  

    var newRow='<tr id="option'+rowCount+'"><td class="oz-form-topLabel">選項'+rowCount+'：</td><td class="oz-property" ><input type="text"  style="width:300px"></td><td><a href="#" onclick=delRow('+rowCount+')>刪除</a></td></tr>';  

    $('#optionContainer').append(newRow);  

}  

//刪除行  

function delRow(rowIndex){  

    $("#option"+rowIndex).remove();  

    rowCount--;  

}

需要注意的是，表單的<tr>中需要定義ID，如果默認(rèn)有行的，就如代碼所示有規(guī)律地定義好ID，這樣可以方便添加一行的時候定義新行ID。

JS中要定義一個行數(shù)變量，因為我的表單中默認(rèn)了4行（第一行，即id='option0'這行可以不用管），所以JS中定義的rowCount默認(rèn)為4.

OK，完事。就如此的簡單。

另外，如果需要在指定位置增加行，需要這么寫

復(fù)制代碼代碼如下:

$("#tab tr").eq(-2).after("<tr style='border:none;'><td style='width: 120px;border:none;' align='right'><strong>關(guān)鍵詞名稱：</strong></td><td style='width: 225px;border:none;'><input type='text' name='name' id='smsName' style='width: 135px;'/> <span class='red'> *</span></td></tr>");

-2就是在倒數(shù)第二個tr后面增加行。
tab是表格的id

希望本文所述對大家的jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: