Html 使用 JavaScript onclick 添加表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19199942/
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 table row with JavaScript onclick
提问by Predrag Beocanin
I'm trying to add the exact same element found below using javascript. I've tried all the solutions found here, I even tried to echo the element with php echobut no luck. There is no need to change any input names, or anything like that, simply on click of that button, add another row to the table, and that's it.
我正在尝试使用 javascript 添加在下面找到的完全相同的元素。我已经尝试了在这里找到的所有解决方案，我什至尝试回显元素，php echo但没有运气。无需更改任何输入名称或类似内容，只需单击该按钮，向表中添加另一行，就可以了。
Here's the element:
这是元素：
<tr>
<td><input type="text" name="links"></td>
<td><input type="text" name="keywords"></td>
<td><input type="text" name="violationtype"></td>
<td><input type="submit" id="last" class="button" value="Add another line" onclick:"addField();"></td>
</tr>
I'm up for anything really, however, I'd like javascript as I kept my system without any external reference (such as jquery) but at this point I'm open to any suggestions. I tried doing it with the following code:
我真的愿意做任何事情，但是，我想要 javascript，因为我保持我的系统没有任何外部引用（例如 jquery），但在这一点上，我愿意接受任何建议。我尝试使用以下代码执行此操作：
function addFields() {
var number = document.getElementById("last").value;
var html = '<tr>' +
'<td><input type="text" name="links"></td>' +
'<td><input type="text" name="keywords"></td>' +
'<td><input type="text" name="violationtype"></td>' +
'<td><input type="submit" id="last" class="button" value="Add another line" name="line" onclick:"addField();"></td>';
number.appendChild(html);
}
But it doesn't seem to do anything. I assume I should handle the code knowing which input is last in a better way than id="last"but I have no clue how to do it.
但它似乎没有任何作用。我假设我应该以更好的方式处理代码，知道哪个输入是最后一个，id="last"但我不知道如何去做。
回答by The Alpha
You may achieve same thing using following
您可以使用以下方法实现相同的目的
HTML:
HTML：
<table id="tbl">
<tr>
<td><input type="text" name="links" /></td>
<td><input type="text" name="keywords" /></td>
<td><input type="text" name="violationtype" /></td>
<td><input type="submit" class="button" value="Add another line" onclick="addField(this);" /></td>
</tr>
</table>
JS:
JS：
function addField(n)
{
var tr = n.parentNode.parentNode.cloneNode(true);
document.getElementById('tbl').appendChild(tr);
}
Also, remove the idfrom input, because an IDmust be unique and remember you are using same names for all of your inputs, here, so, names should be named as links[], keywords[]and violationtype[]to use them as array, but not sure what is your case.
此外，删除idfrom input，因为 anID必须是唯一的，并记住您对所有输入使用相同的名称，因此，名称应命名为 links[]，keywords[]并将violationtype[]它们用作数组，但不确定您的情况。
回答by thefourtheye
A complete working example - http://jsfiddle.net/QmHdL/
一个完整的工作示例 - http://jsfiddle.net/QmHdL/
Table can be created like this
表可以这样创建
<table id="myTable">
<tr>
<td><input type="text" name="links"></td>
<td><input type="text" name="keywords"></td>
<td><input type="text" name="violationtype"></td>
<td><input type="button" class="button" value="Add another line" onclick="addField();"></td>
</tr>
</table>
Now, addFieldhas to be implemented like this
现在，addField必须像这样实现
function addField (argument) {
var myTable = document.getElementById("myTable");
var currentIndex = myTable.rows.length;
var currentRow = myTable.insertRow(-1);
var linksBox = document.createElement("input");
linksBox.setAttribute("name", "links" + currentIndex);
var keywordsBox = document.createElement("input");
keywordsBox.setAttribute("name", "keywords" + currentIndex);
var violationsBox = document.createElement("input");
violationsBox.setAttribute("name", "violationtype" + currentIndex);
var addRowBox = document.createElement("input");
addRowBox.setAttribute("type", "button");
addRowBox.setAttribute("value", "Add another line");
addRowBox.setAttribute("onclick", "addField();");
addRowBox.setAttribute("class", "button");
var currentCell = currentRow.insertCell(-1);
currentCell.appendChild(linksBox);
currentCell = currentRow.insertCell(-1);
currentCell.appendChild(keywordsBox);
currentCell = currentRow.insertCell(-1);
currentCell.appendChild(violationsBox);
currentCell = currentRow.insertCell(-1);
currentCell.appendChild(addRowBox);
}
回答by WindsorAndy
There are a few problems here..
这里有几个问题。。
The onclick:should be onclick=
该onclick:应onclick=
Then you're appending to the element with id 'last' which is an input element - you can't append to that. Give your table an ID and append to that instead if you want to add a row, otherwise create some other element - div/span with an ID and append to that if the whle table is to bee created from scratch
然后你附加到 id 'last' 的元素，这是一个输入元素 - 你不能附加到那个元素。如果要添加一行，请为您的表提供一个 ID 并附加到该 ID，否则创建一些其他元素 - 带有 ID 的 div/span 并附加到该 ID，如果要从头开始创建整个表
Then - you can't append HTML like that; you need to either create an new table row element and append that or use [element].innerHTML += [your new row HTML].
然后 - 你不能像那样附加 HTML；您需要创建一个新的表格行元素并附加它或使用[element].innerHTML += [your new row HTML].
