这段代码是通过jquery动态增加限定数额的text，以及清除文本内容，用到了after()方法追加元素，具体实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
这段代码是通过jquery动态增加限定数额的text（本例为5个） ，以及清除文本内容，用到了after()方法追加元素。
<!--以下为script代码开始-->
复制代码 代码如下:
<script>
$(document).ready(function(){
var spotMax = 5;//限定添加text元素的总个数
var afterId = 0;//要追加元素的id
var newId=1;//新生成text的id
if($('table#vote').size() >= spotMax) {}
$("#btnAddOption").click(function(){
afterId++;
newId=afterId+1;
addSpot(this, spotMax,afterId,newId);
});
});
//添加选项方法
function addSpot(obj, sm,afterId,newId) {
if($('tr.spot').size() < sm){
$('#vote_'+afterId).after(
'<tr><th>'+afterId+'</th>' +
'<td><input type="text" value="" size="40" /></td> ' +
'</tr>');
$(":text[id^='txtInput_']").val("输入文本...");//给新增的文本赋予初始值
}
else{
alert("最多只能添加5项投票！");
}
};
//重置选项
$("input#btnResetOption").click(function(){
$(":text[id^='txtInput_']").val("");//清空文本内容
});
</script>
<!--以下为script代码结束-->
<!--以下为html代码块开始-->
复制代码 代码如下:
<form method='post' action="admin/vote/doVote">
<table cellpadding=0 cellspacing=0>
<tr>
<th>投票名称</th>
<td>
<input type="text" value="" size="85"/>
</td>
</tr>
<tr>
<th>投票描述</th>
<td>
<textarea cols="85" ></textarea>
</td>
</tr>
<tr>
<th>开始时间</th>
<td>
<input type="text" value="" size="40" readonly="readonly"/>
</td>
</tr>
<tr>
<th>结束时间</th>
<td>
<input type="text" size="40" readonly="readonly"/>
</td>
</tr>
<tr>
<th>是否多选</th>
<td>
<input type="radio" value="0" size="40"/>单选
<input type="radio" value="1" size="40"/>多选
</td>
</tr>
<tr>
<th>投票选项</th>
<td>
<input type="button" value="添加选项"/>
<input type="reset" value="重置选项"/>
</td>
</tr>
<tr>
<th></th>
<td>
<input type="submit" value="保存"/>
<input type="submit" value="取消"/>
</td>
</tr>
</table>
</form>
<!--以下为html代码块开始-->
以下是运行效果：
您可能感兴趣的文章: