jquery实现增加删除行的方法_jquery
程序员文章站
2022-04-27 22:49:58
...
本文实例讲述了jquery实现增加删除行的方法。分享给大家供大家参考。具体分析如下：
中需要定义ID，如果默认有行的，就如代码所示有规律地定义好ID，这样可以方便添加一行的时候定义新行ID。
最近做一个投票管理的模块，需要添加问题选项，为了方便，就简单地实现了表格行的添加、删除。
注：需引入jquery.js
先上效果图：(form中默认有4行)
表单代码：
复制代码 代码如下:
JS代码：
复制代码 代码如下:
var rowCount=4; //行数默认4行
//添加行
function addRow(){
rowCount++;
var newRow='
选项'+rowCount+'：
删除
';
$('#optionContainer').append(newRow);
}
//删除行
function delRow(rowIndex){
$("#option"+rowIndex).remove();
rowCount--;
}
//添加行
function addRow(){
rowCount++;
var newRow='
$('#optionContainer').append(newRow);
}
//删除行
function delRow(rowIndex){
$("#option"+rowIndex).remove();
rowCount--;
}
需要注意的是，表单的
JS中要定义一个行数变量，因为我的表单中默认了4行（第一行，即id='option0'这行可以不用管），所以JS中定义的rowCount默认为4.
OK，完事。就如此的简单。
另外，如果需要在指定位置增加行，需要这么写
复制代码 代码如下:
$("#tab tr").eq(-2).after("
关键词名称：
*
");
-2就是在倒数第二个tr后面增加行。
tab是表格的id
希望本文所述对大家的jQuery程序设计有所帮助。
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频
- javascript怎么将值类型强制转为字符串
- javascript中什么是位运算符
- 总结分享： 6 种JavaScript的打断点的方...
- javascript怎么判断字符串是否是数字
- jquery实现增加删除行的方法_jquery
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
作者信息
- 最新文章
- 热门排行
上一篇： 网管技巧：基于MAC地址来管控流量
下一篇： 简单的PHP图像处理类库
推荐阅读
-
jquery实现iframe自适应高宽的方法
-
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法_jquery
-
Javascript/Jquery——简单定时器的多种实现方法
-
jQuery实现table表格checkbox全选的方法分析
-
如何用jQuery实现用户信息表格的添加、删除
-
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
-
jquery实现excel导出的方法_jquery
-
jquery+php实现导出datatables插件数据到excel的方法，jquerydatatables_PHP教程
-
jQuery扩展方法实现Form表单与Json互相转换的实例代码
-
jQuery实现基本淡入淡出效果的方法详解
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论