javascript 在Javascript中动态添加多行到表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17918577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add multiple rows to table dynamically in Javascript
提问by user2626643
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).
我希望能够向表中添加任意多的行，以便它动态地增长和缩小。（现在我只专注于它的增长）当我想在表格底部添加一行时，这段代码很有效，但是当我想在表格中间添加一行时，我的代码不太正确，（我得到一个错误）。
eg.
例如。
title | title | title |
1....| 1.... | 1.... | addBtn
标题 | 标题 | 标题 |
1....| 1.... | 1.... | 添加Btn
a few mins later
几分钟后
title | title | title |
1....| 1....| 1....| addBtn
2....| 2....| 2....| addBtn <- i click on this
3....| 3....| 3....| addBtn
4....| 4....| 4....| addBtn
标题 | 标题 | 标题 |
1....| 1....| 1....| addBtn
2....| 2....| 2....| addBtn <- 我点击这个
3....| 3....| 3....| addBtn
4....| 4....| 4....| 添加Btn
becoming...
变得...
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
标题 | 标题 | 标题 |
1....| 1....| 1....| addBtn
2....| 2....| 2....| addBtn <- 我点击了这个
3....| 3....| 3....| addBtn <- 它创建了这一行
4....| 4....| 4....| addBtn <- 此行曾经位于 3
5....| 5....| 5....| addBtn <- 该行曾经就位 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='+' />";
}
Here is the HTML
这是 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>
回答by user2626643
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.
这是我的第一个小提琴中的一个活生生的例子。
回答by jdog
I agree jQuery is your friend for stuff like this. See this fiddlefor an example
我同意 jQuery 是您处理此类事情的朋友。以这个小提琴为例
waaaaaay less code I managed to get the JS down to something like this:
waaaaaay 更少的代码我设法让 JS 变成这样：
var table = $("table"),
button = $("#clicktoadd");
button.on('click', function() {
table.append("<tr><td>New Data</td><td>New Data</td>");
});
^^ cheers
^^ 欢呼
edit:
编辑：
I guess this is what you need:
我想这就是你需要的：
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>");
});
it has a slightly different html setup I've updated the fiddle above as well.
它的 html 设置略有不同，我也更新了上面的小提琴。
