使用JQuery动态插入/删除字段 [英] Dynamically insert/remove fields using JQuery
问题描述
在一个jsp中,我有一个加号按钮,当用户单击它时,它会动态生成字段.
In a jsp, I have a plus button and when user clicks it it dynamically generates fields.
现在,我想向每个新添加的字段添加一个删除链接.我已经插入一个按钮并编写了函数.但这并没有像我期望的那样删除父<tr>
.
Now I want to add a remove link to each field newly added. I have inserted a button and wrote the function. But it does not remove the parent <tr>
as I expect.
以下是我的整个剧本.如果用户单击删除按钮时还有另一种方法来删除行,请提供帮助.
Following is my whole script. Please help if there is another way to remove the row when user clicks the remove button.
谢谢.
我的剧本:
<script>
$(document).ready(function() {
var iCnt = 1;
// CREATE A "DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
$('#plusbtn').click(function() {
if (iCnt <= 14) {
iCnt = iCnt + 1;
// ADD TEXTBOX.
$('#headingrow').append('<tr align="left" valign="middle" id="sampleTr" >'+
'<td width="12%" valign="bottom" class="content">'+
'<select style=" width:165px;" name=attrtype'+iCnt+' ' + 'class="content" id=attrtype'+iCnt+' ' + 'onchange="specialAttr(this);">'+
'<option selected="selected" value="">-Data Type-</option>'+
'<option value="text">Text</option>'+
'<option value="number">Number</option>'+
'<option value="currency">Currency</option>'+
'<option value="percentage">Percentage</option>'+
'<option value="date">Date</option>'+
'</select>'+
'<input style=" width:165px;" name=attr'+iCnt+' ' + 'id=attr' + iCnt + ' ' + 'type="text" class="content" value="" placeholder="Attribute Name">'+
'<input style=" width:95px;" name=attrDec'+iCnt+' '+ 'id=attrDec' + iCnt + ' ' + 'type="hidden" class="content" value="" placeholder="Decimal Points">'+
'<input style=" width:90px; background-color: white; color: Red; border: 0px solid;" name="attrRem" id="attrRem" type="button" class="content" value="Remove" >'+
'</td>'+
'</tr>');
}
// AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
// (20 IS THE LIMIT WE HAVE SET)
else {
$('#plusbtn').hide();
}
$('#attrRem').click(function(){
//window.alert(this.value);
e.preventDefault();
$(this).parent("tr").remove();
iCnt = iCnt-1;
});
});
});
</script>
推荐答案
您需要创建函数而不是click事件或绑定实时事件.因为您每次单击添加"按钮时都会操纵DOM.
You need to create a function instead of click event or bind a live event. Because your DOM was manipulated everytime you click on Add button.
尝试更新代码
<script>
$(document).ready(function() {
var iCnt = 1;
// CREATE A "DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
$('#plusbtn').click(function() {
if (iCnt <= 14) {
iCnt = iCnt + 1;
// ADD TEXTBOX.
$('#headingrow').append('<tr align="left" valign="middle" id="sampleTr" >'+
'<td width="12%" valign="bottom" class="content">'+
'<select style=" width:165px;" name=attrtype'+iCnt+' ' + 'class="content" id=attrtype'+iCnt+' ' + 'onchange="specialAttr(this);">'+
'<option selected="selected" value="">-Data Type-</option>'+
'<option value="text">Text</option>'+
'<option value="number">Number</option>'+
'<option value="currency">Currency</option>'+
'<option value="percentage">Percentage</option>'+
'<option value="date">Date</option>'+
'</select>'+
'<input style=" width:165px;" name=attr'+iCnt+' ' + 'id=attr' + iCnt + ' ' + 'type="text" class="content" value="" placeholder="Attribute Name">'+
'<input style=" width:95px;" name=attrDec'+iCnt+' '+ 'id=attrDec' + iCnt + ' ' + 'type="hidden" class="content" value="" placeholder="Decimal Points">'+
'<input style=" width:90px; background-color: white; color: Red; border: 0px solid;" name="attrRem" id="attrRem" type="button" class="content" value="Remove" click="remove(this);" >'+
'</td>'+
'</tr>');
}
// AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
// (20 IS THE LIMIT WE HAVE SET)
else {
$('#plusbtn').hide();
}
});
});
function remove(currObj){
var $this=$(currObj);
$this.parent().remove();
}
</script>
快乐编码:)
这篇关于使用JQuery动态插入/删除字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!