jquery增加删除行方法示例

发布时间:2019-12-14编辑:脚本学堂
jquery操作表格的能力很强,有关jquery增加删除行的方法,包括了表格中行的增加与删除技巧,实现了表格行的添加、删除,一起学习下。

jquery实现表格行的添加、删除。

记得引入jquery.js文件。

效果图:(form中默认有4行)

jquery增加删除行

1、表单代码:
 

复制代码 代码示例:
<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>

2、javascript代码:
 

复制代码 代码示例:

var rowCount=4;//行数默认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,如果默认有行的,就如代码所示有规律地定义好ID,这样可以方便添加一行的时候定义新行ID。
js中要定义一个行数变量,因为我的表单中默认了4行(第一行,即id='option0'这行可以不用管),所以js中定义的rowcount默认为4.

另外,如果需要在指定位置增加行,需要这么写:
 

$("#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就是在倒数第二个tr后面增加行。
tab是表格的id