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);
}

此外，从id移除input，因为ID必须是唯一的，并且记住您在所有输入中使用相同的名称，因此，名称应该被命名以links[]，keywords[]和violationtype[]将其用作数组，但不确定您的情况。

An Example.

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为＆＃39; last＆＃39;的元素。这是一个输入元素 - 你不能附加到那个元素。如果你想添加一行，给你的表一个ID并附加到它，否则创建一些其他元素 - 带有ID的div / span，如果要从头创建whle表，则追加到

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

使用JavaScript onclick添加表格行

3 个答案: