Question

我希望能够在表格中添加尽可能多的行，以便动态增长和缩小。（现在我只专注于它的增长）当我想在表格的底部添加一行时，这段代码很有用，但是当我想在表格的中间添加一行时，我的内容就有了代码不太正确，（我收到错误）。

例如

标题|标题|标题|
1 .... | 1 .... | 1 .... | addBtn

几分钟之后

标题|标题|标题|
1 .... | 1 .... | 1 .... | addBtn
2 .... | 2 .... | 2 .... | addBtn＆lt; - 我点击这个
3 .... | 3 .... | 3 .... | addBtn
4 .... | 4 .... | 4 .... | addBtn

...成为

标题|标题|标题|
1 .... | 1 .... | 1 .... | addBtn
2 .... | 2 .... | 2 .... | addBtn＆lt; - 我点击了这个 3 .... | 3 .... | 3 .... | addBtn＆lt; - 它创建了这一行
4 .... | 4 .... | 4 .... | addBtn＆lt; - 此行以前就位3 5 .... | 5 .... | 5 .... | addBtn＆lt; - 此行已经到位4

我是新手，但我花了一天时间试图让这个工作;还看着克隆功能，这对我来说似乎不起作用。我也从未使用输入数组，所以如果这不正确那么你会推荐什么？

<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>&nbsp;</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>

Answer 1

所以我在工作中得到了一些帮助。这是我们得到的：

$(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/

Answer 2

我同意jQuery是你这样的朋友的朋友。有关示例，请参阅此fiddle

waaaaaay更少的代码我设法让JS变成这样的东西：

var table = $("table"),
button = $("#clicktoadd");

 button.on('click', function() {
     table.append("<tr><td>New Data</td><td>New Data</td>");
   });

^^欢呼

编辑：

我想这就是你需要的：

var table = $("table");

$(document).on('click', 'a', function() {
   // some randomness to distinguish rows
   var a = Math.round( Math.random() * 10 ), b = Math.round( Math.random() * 10 );
   $(this).parents('tr').after("<tr><td>" + a + "</td><td>" + b + "</td><td><a           class='clicktoadd' href='#'>Click to Add</a></td>");
});

它有一个稍微不同的html设置我也更新了上面的小提琴。

在Javascript中动态地向表中添加多行

2 个答案: