3

我正在尝试使用 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"但我不知道该怎么做。

4

3 回答 3

11

您可以使用以下方法实现相同的目标

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

另外，删除idfrom input，因为 anID必须是唯一的，并记住您对所有输入使用相同的名称，因此，名称应命名为 links[]，keywords[]并将violationtype[]它们用作数组，但不确定您的情况。

一个例子。

于 2013-10-05T16:53:56.910 回答
8

一个完整的工作示例 - 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);
    }
于 2013-10-05T16:58:32.520 回答
1

这里有几个问题..

onclick:应该是onclick=

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

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

于 2013-10-05T16:33:40.170 回答