100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > jQuery动态添加 删除按钮及input输入框

jQuery动态添加 删除按钮及input输入框

时间:2019-12-17 03:30:14

相关推荐

jQuery动态添加 删除按钮及input输入框

效果图

div

<tr><td class="column-title"><label>*******</label></td><td colspan="3"><div><a href="javascript:void(0);" id="addPrndInput"class="easyui-linkbutton"data-options="iconCls:'icon-add',plain:true">添加</a><!--<a href="javascript:void(0);" id="delPrndInput"--><!--class="easyui-linkbutton"--><!--data-options="iconCls:'icon-remove',plain:true">删除</a>--></div><div id="prndBox">//这里注销掉,不然第一次点击添加按钮会增加两个input框<!--<div style="float: left">--><!--<input id="dd-nbyjy-add-prnd_1" name="prnd[]" class="easyui-datebox" style="width:100px;">&nbsp;&nbsp;--><!--</div>--></div></td></tr>

script

//添加inpu框$(document).ready(function () {var maxInputs = 10; //input框最大数var prndBox = $("#prndBox");var addButton = $("#addPrndInput");var x = prndBox.length;var prndInputCount = 1;$(addButton).click(function (e) {if (x <= maxInputs) {prndInputCount++;$(prndBox).append('<div id="prndDiv_' + prndInputCount + '" style="float: left"><input id="dd-nbyjy-add-prnd_' + prndInputCount + '" name="prnd" style="width:100px;">&nbsp;<a href="#" class="removeclass">×</a>&nbsp;&nbsp;</div>');x++;}$("input[id^='dd-nbyjy-add-prnd_']").datebox({disabled: false});return false;});$("body").on("click", ".removeclass", function (e) {if (x > 1) {$(this).parent('div').remove();x--;}return false;})});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。