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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
javascript canvas实现雨滴效果
Jun 09 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
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python金融数据可视化汇总
2017/11/17 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
python字典排序的方法
2019/10/12 Python
python logging添加filter教程
2019/12/24 Python
用python写爬虫简单吗
2020/07/28 Python
控制工程专业个人求职信
2013/09/25 职场文书
公司董事长职责
2013/12/12 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
赤壁观后感(2)
2015/06/15 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python