我想像这样在行悬停时添加删除和添加按钮。
但是我的动态字段会生成button click
我可以为上述链接设计做哪些更改?这是我的代码:
<tr>
<td colspan=7 width=800><div id="input1" style="margin-bottom:4px;" class="clonedInput"><select class="items" name="items" style="width:127px; float:left;" id="items"><option value="1" selected="selected" disabled="disabled"></option></select>
<textarea name="description" id="description" class="description" style="float:left; display: block; height: 30px; width:209px; border-radius:0px; margin: -1px 1px 0;"></textarea>
<input type="text" name="unitprice" id="unitprice" class="unitprice" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px -1px 0;">
<input type="text" name="quantity" id="quantity" class="quantity" style="float:left; display: block; height: 30px; width:64px; border-radius:0px; margin: -1px 1px 0;">
<select name="firsttax" id="firsttax" style=" float:left; display: block; height: 31px; width:106px; border-radius:0px; margin: -2px -1px 0;"><option value="1" selected="selected" ></option></select>
<select name="secondtax" id="secondtax" style="float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;"><option value="1" selected="selected"></option></select>
<input type="text" name="linetotal" id="linetotal" class="linetotal" placeholder="0.00" readonly style="float:right; display: block; height: 31px; width:107px; border-radius:0px; background-color: #F0F0F0; text-align:right; margin: -31px -1px 0;">
</div>
</td></tr>
这是我javascript
动态生成字段的代码:
$('#btnDel').attr('disabled','disabled');
$('#btnAdd').click(function () {
var num = $('.clonedInput').length;
var newNum = num + 1;
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.find(':input').each(function () {
$('form select[name=items]').attr('name', 'items'+newNum);
$('form select[id=items]').attr('id', 'items'+newNum);
$('form textarea[name=description]').attr('name', 'description'+newNum);
$('form textarea[id=description]').attr('id', 'description'+newNum);
$('form input[name=unitprice]').attr('name', 'unitprice'+newNum);
$('form input[id=unitprice]').attr('id', 'unitprice'+newNum);
$('form input[name=quantity]').attr('name', 'quantity'+newNum);
$('form input[id=quantity]').attr('id', 'quantity'+newNum);
$('form select[name=firsttax]').attr('name', 'firsttax'+newNum);
$('form select[id=firsttax]').attr('id', 'firsttax'+newNum);
$('form select[name=secondtax]').attr('name', 'secondtax'+newNum);
$('form select[id=secondtax]').attr('id', 'secondtax'+newNum);
$('form input[name=linetotal]').attr('name', 'linetotal'+newNum);
$('form input[id=linetotal]').attr('id', 'linetotal'+newNum);
$('#itemscounter').val(+newNum);
});
$('#input' + num).after(newElem);
$('#btnDel').attr('disabled', false);
//if (newNum == 5) $('#btnAdd').attr('disabled', 'disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length;
$('#input' + num).remove();
$('#btnAdd').attr('disabled',false);
if (num-1 === 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
这是我的按钮:
<input type="button" class="btn btn-success" id="btnAdd" value="Add Row" />
<input type="button" class="btn btn-danger" id="btnDel" value="Remove Row" />