jquery实现增加删除行的方法


Posted in Javascript onFebruary 03, 2015

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

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

注:需引入jquery.js

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

jquery实现增加删除行的方法

表单代码:

<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>

JS代码:

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.

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

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

$("#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

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

Javascript 相关文章推荐
Javascript 垃圾收集机制介绍理解
May 14 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
Js面试算法详解
Apr 08 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 #Javascript
director.js实现前端路由使用实例
Feb 03 #Javascript
js与jquery回车提交的方法
Feb 03 #Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 #Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 #Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 #Javascript
jQuery内部原理和实现方式浅析
Feb 03 #Javascript
You might like
简单的PHP留言本实例代码
2010/05/09 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python运行时强制刷新缓冲区的方法
2019/01/14 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
python利用7z批量解压rar的实现
2019/08/07 Python
python 实现生成均匀分布的点
2019/12/05 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
荷兰手表网站:Watch2Day
2018/07/02 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
三项教育活动实施方案
2014/03/30 职场文书
爱护公物标语
2014/06/24 职场文书
作风转变心得体会
2014/09/02 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
党小组推荐意见
2015/06/02 职场文书
员工离职证明范本
2015/06/12 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
门卫管理制度范本
2015/08/05 职场文书
解析目标检测之IoU
2021/06/26 Python