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检测客户端不是firefox则提示下载
Apr 07 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
vue-cli3全面配置详解
Nov 14 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
自定义函数实现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连接函数implode与分割explode的深入解析
2013/06/26 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
使用console进行性能测试
2015/04/27 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
Python实现App自动签到领取积分功能
2018/09/29 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
党员承诺书范文
2014/05/19 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
安全生产年活动总结
2014/08/29 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
nginx优化的六点方法
2021/03/31 Servers