jquery实现增加删除行的方法

时间：2022-08-06 16:04 编辑：来源：阅读：
扫一扫，手机访问

摘要：jquery实现增加删除行的方法

本文实例讲述了jquery实现增加删除行的方法。分享给大家供大家参考。具体分析如下：最近做一个投票管理的模块，需要添加问题选项，为了方便，就简单地实现了表格行的添加、删除。注：需引入jquery.js 先上效果图：(form中默认有4行) [img]http://files.jb51.net/file_images/article/201502/201523110530712.png?20151311544[/img] 表单代码：

[url=#] </div> </div>

JS代码：

[u]复制代码[/u][/url] 代码如下:

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，完事。就如此的简单。另外，如果需要在指定位置增加行，需要这么写

[u]复制代码[/u] 代码如下:

$("#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程序设计有所帮助。

全部评论(0)

上一篇：jQuery中first()方法用法实例
下一篇：jQuery简单实现遍历数组的方法