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 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
自定义函数实现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中的函数-- foreach()的用法详解
2013/06/24 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
laravel请求参数校验方法
2019/10/10 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python 定义只读属性的实现方式
2020/03/05 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
医生自荐信
2013/10/11 职场文书
采购员岗位职责
2013/11/15 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
工作经历证明书范文
2014/11/02 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
vue首次渲染全过程
2021/04/21 Vue.js
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers