欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-28 16:45:12
...
本文实例讲述了jquery实现增加删除行的方法。分享给大家供大家参考。具体分析如下:

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

注:需引入jquery.js

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

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

表单代码:

复制代码 代码如下:



























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

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

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

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频


网友评论

文明上网理性发言,请遵守 新闻评论服务协议

我要评论
  • jquery实现增加删除行的方法_jquery
  • 专题推荐

    作者信息
    jquery实现增加删除行的方法_jquery

    认证0级讲师

    推荐视频教程
  • jquery实现增加删除行的方法_jqueryjavascript初级视频教程
  • jquery实现增加删除行的方法_jqueryjquery 基础视频教程
  • 视频教程分类