jquery实现增加删除行的方法
本文实例讲述了jquery实现增加删除行的方法。分享给大家供大家参考。具体分析如下:
最近做一个投票管理的模块,需要添加问题选项,为了方便,就简单地实现了表格行的添加、删除。
注:需引入jquery.js
先上效果图:(form中默认有4行)
表单代码:
<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代码:
//添加行
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,完事。就如此的简单。
另外,如果需要在指定位置增加行,需要这么写
-2就是在倒数第二个tr后面增加行。
tab是表格的id
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
jquery ajax结合thinkphp的getjson实现跨域的方法
这篇文章主要介绍了jquery ajax结合thinkphp的getjson实现跨域的方法,结合实例形式对比分析了jQuery ajax实现跨域的具体操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
相信大家喜欢这个界面无非也是喜欢它的动态磁贴。刚好今天研究了一下如何通过JQuery在网页上模仿这种效果,就贴出来给大家喷一下。虽然是一些很低级的技术,但是也希望有需要的朋友可以参考下2013-07-07jquery mobile页面跳转后样式丢失js失效的解决方法
用ajax跳转的时候,目标页的css以及js都失效,这是由于page之外的代码都不会加载,所以导致在page外的js和css都失效,解决方法如下2014-09-09jQuery的选择器中的通配符[id^=''code'']或[name^=''code'']及jquery选择器总结
这篇文章主要介绍了jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结的相关资料,需要的朋友可以参考下2015-12-12
最新评论