使用JavaScript onclick添加表格行

Question

我正在尝试使用javascript添加下面找到的完全相同的元素。 我已经尝试了这里找到的所有解决方案，我甚至尝试用php echo回声元素，但没有运气。 没有必要更改任何输入名称或任何类似的东西，只需单击该按钮，向表中添加另一行，就是这样。

这是元素：

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

我真的很喜欢，但是，我喜欢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);
}

但它似乎没有做任何事情。 我假设我应该处理代码，知道哪个输入比id="last"更好，但我不知道怎么做。

Answer 1

您可以使用以下内容实现相同的目标

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：

function addField(n)
{
    var tr = n.parentNode.parentNode.cloneNode(true);
    document.getElementById('tbl').appendChild(tr);
}

另外，从input删除id ，因为ID必须是唯一的，并记住您在所有输入中使用相同的名称，因此，名称应命名为links[] ， keywords[]和violationtype[]以使用它们作为数组，但不知道你的情况。

一个例子 。

Answer 2

一个完整的工作示例 - http://jsfiddle.net/QmHdL/

可以像这样创建表

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

现在， 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);
    }

Answer 3

这里有一些问题..

onclick:应该是onclick=

然后你要追加id为'last'的元素，这是一个输入元素 - 你不能附加到那个元素。 如果你想添加一行，给你的表一个ID并附加到它，否则创建一些其他元素 - 带有ID的div / span，如果whle表是从头开始创建的话，追加到那个

然后 - 你不能像那样附加HTML; 你需要创建一个新的表行元素并附加它或使用[element].innerHTML += [your new row HTML] 。