<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'}">(復選)</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代碼：

復制代碼代碼如下:

var rowCount=4;  //行數(shù)默認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，如果默認有行的，就如代碼所示有規(guī)律地定義好ID，這樣可以方便添加一行的時候定義新行ID。

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

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

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

復制代碼代碼如下:

$("#tab tr").eq(-2).after("<tr style='border:none;'><td style='width: 120px;border:none;' align='right'><strong>關鍵詞名稱：</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程序設計有所幫助。

您可能感興趣的文章: