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 相关文章推荐
如何减少浏览器的reflow和repaint
Feb 26 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
Vue指令指令大全
Feb 09 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
React中获取数据的3种方法及优缺点
Feb 18 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
mysql+php分页类(已测)
2008/03/31 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
帝国cms常用标签汇总
2015/07/06 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
php图像验证码生成代码
2017/06/08 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
Python实现类的创建与使用方法示例
2017/07/25 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
python在文本开头插入一行的实例
2018/05/02 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
Python实现结构体代码实例
2020/02/10 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
关于感恩的演讲稿200字
2014/08/26 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
JavaScript异步操作中串行和并行
2021/11/20 Javascript
MySQL存储过程及语法详解
2022/08/05 MySQL