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做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
PHP中一个控制字符串输出的函数
2006/10/09 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
php从字符串创建函数的方法
2015/03/16 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
javascript 上下banner替换具体实现
2013/11/14 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
JS验证字符串功能
2017/02/22 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
使用python统计文件行数示例分享
2014/02/21 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
学生自我鉴定范文
2013/10/04 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
经典公益广告词
2014/03/13 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
学校三节实施方案
2014/06/09 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
小学运动会开幕词
2015/01/28 职场文书
财务部岗位职责
2015/02/03 职场文书
应急管理工作总结2015
2015/05/04 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
利用JavaScript写一个简单计算器
2021/11/27 Javascript
python 实现图片特效处理
2022/04/03 Python