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

问题描述

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

I want to be able to add as many rows as I like to a table so that it dynamically grows and shrinks. (Right now I'm just concentrating on it growing) This code works great when I want to add a row to the bottom of the table, however when I want to add a row in the middle of the table, there is something in my code not quite right, (and I get an error).

例如。

title |标题|标题|

1 .... | 1 .... | 1 .... | addBtn

title | title | title |
1....| 1.... | 1.... | addBtn

几分钟后

title |标题|标题|

1 .... | 1 .... | 1 .... | addBtn

2 .... | 2 .... | 2 .... | addBtn< - 我点击这个

3 .... | 3 .... | 3 .... | addBtn

4 .... | 4 .... | 4 .... | addBtn

title | title | title |
1....| 1....| 1....| addBtn
2....| 2....| 2....| addBtn <- i click on this
3....| 3....| 3....| addBtn
4....| 4....| 4....| addBtn

成为......

title |标题|标题|

1 .... | 1 .... | 1 .... | addBtn

2 .... | 2 .... | 2 .... | addBtn< - 我点击这个

3 .... | 3 .... | 3 .... | addBtn< - 它创建了这一行

4 .... | 4 .... | 4 .... | addBtn< - 此行曾经到位3

5 .... | 5 .... | 5 .... | addBtn< - 此行已经到位4

title | title | title |
1....| 1....| 1....| addBtn
2....| 2....| 2....| addBtn <- i clicked on this
3....| 3....| 3....| addBtn <- it created this row
4....| 4....| 4....| addBtn <- this row used to be in place 3
5....| 5....| 5....| addBtn <- this row used to be in place 4

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

I am new to this, but I have spent a day trying to get this working; also looking at the clone feature which doesn't seem to work either for me. I've also never worked with input arrays so if this is not correct then what would you recommend?

<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>

推荐答案

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

So I got some help from someone at work. Here is what we got:

$(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);

    });

这是我第一个小提琴的实例。

here is a live example in my first ever fiddle.

这篇关于在Javascript中动态地向表中添加多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！