您好,欢迎来到宝玛科技网。
搜索
您的当前位置:首页jquery实现增加删除行的方法_jquery

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程序设计有所帮助。

Copyright © 2019- baomayou.com 版权所有 赣ICP备2024042794号-6

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务