我希望能够向表中添加任意多的行,以使其动态增长和收缩。 (现在我只是专注于它的增长)当我想在表的底部添加一行时,此代码非常有用,但是当我想在表的中间添加一行时,代码不太正确,(并且出现错误)。
例如。
标题|标题|标题|
1 .... | 1 .... | 1 .... | addBtn
几分钟后
标题|标题|标题|
1 .... | 1 .... | 1 .... | addBtn
2 .... | 2 .... | 2 .... | addBtn 3 .... | 3 .... | 3 .... | addBtn
4 .... | 4 .... | 4 .... | addBtn
变得...
标题|标题|标题|
1 .... | 1 .... | 1 .... | addBtn
2 .... | 2 .... | 2 .... | addBtn 3 .... | 3 .... | 3 .... | addBtn 4 .... | 4 .... | 4 .... | addBtn 5 .... | 5 .... | 5 .... | addBtn
我是新手,但是我花了一天的时间尝试使它起作用。还查看了对我似乎也不起作用的克隆功能。我也从未使用过输入数组,因此,如果这不正确,那么您会推荐什么?
<script>
function displayResult(j)
{
if (j <= document.getElementById("purchaseItems").rows.length) {
for (var i= document.getElementById("purchaseItems").rows.length; i>j ;i--) {
var elName = "addRow[" + i + "]";
var newName = "addRow[" + (i+1) + "]";
var newClick = "displayResult(" + (i+1) + ")";
var modEl = document.getElementsByName(elName);
modEl.setAttribute("onclick", newClick);
document.getElementsByName("addRow[" + i + "]").setAttribute('name', "addRow[" + (i+1) + "]");
}
}
var table=document.getElementById("purchaseItems");
var row=table.insertRow(j);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
var cell5=row.insertCell(4);
cell1.innerHTML="<input type=text class='tbDescription' name='description[]' required/>";
cell2.innerHTML="<input type=text name='itemPrice[]' required />";
cell3.innerHTML="<input type=text name='itemquantity[]' required />";
cell4.innerHTML="<input type='text' name='lineTotal[]' readonly />";
cell5.innerHTML="<input type='button' name='addRow["+ j + "]' class='add' onclick=\"displayResult(" + (j+1) + ")\" value='+' />";
}
这是HTML
<table id= "purchaseItems" name="purchaseItems" align="center">
<tr>
<th>Description</th>
<th>price</th>
<th>quantity</th>
<th>Line Total</th>
<td> </td>
</tr>
<tr>
<td><input type="text" name="description[]" class="tbDescription" required /></td>
<td><input type="text" name="price[]" required /></td>
<td><input type="text" name="quantity[]" required /></td>
<td><input type="text" name="lineTotal[]" readonly /></td>
<td><input type="button" name="addRow[1]" onclick="displayResult(2)" class="add" value='+' /></td>
</tr>
最佳答案
所以我从工作中得到一些帮助。这是我们得到的:
$(document).on('click', '#purchaseItems .add', function(){
var row = $(this).closest('tr');
var clone = row.clone();
// clear the values
var tr = clone.closest('tr');
tr.find('input[type=text]').val('');
$(this).closest('tr').after(clone);
});
这是我有史以来第一个小提琴手的例子。
http://jsfiddle.net/paulscicluna/h5DV5/