输入banner图图片脚本导航/分类

jquery实现增加删除行的方法_jquery

本文实例讲述了jquery实现增加删除行的方法。分享给大家供大家参考。具体分析如下:

最近做一个投票管理的模块,需要添加问题选项,为了方便,就简单地实现了表格行的添加、删除。

注:需引入jquery.js

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

表单代码:

代码如下:



























所属问题
(单选)
(复选):

${question}
选项1:

选项2:

选项3:

选项4:



添加一行

JS代码:

代码如下:
var rowCount=4; //行数默认4行

//添加行
function addRow(){
rowCount++;
var newRow='选项'+rowCount+':删除';
$('#optionContainer').append(newRow);
}

//删除行
function delRow(rowIndex){
$("#option"+rowIndex).remove();
rowCount--;
}

需要注意的是,表单的中需要定义ID,如果默认有行的,就如代码所示有规律地定义好ID,这样可以方便添加一行的时候定义新行ID。

JS中要定义一个行数变量,因为我的表单中默认了4行(第一行,即id='option0'这行可以不用管),所以JS中定义的rowCount默认为4.

OK,完事。就如此的简单。

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

代码如下:
$("#tab tr").eq(-2).after("关键词名称: *");

-2就是在倒数第二个tr后面增加行。
tab是表格的id

希望本文所述对大家的jQuery程序设计有所帮助。