使用 JavaScript 点击添加表格行

Add table row with JavaScript onclick

本文关键字：表格 添加 JavaScript 使用      更新时间：2023-09-26

我正在尝试使用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"更好的方式处理代码，知道哪个输入是最后的，但我不知道该怎么做。

您可以使用

以下方法实现相同的目标

.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[]将它们用作数组，但不确定您的情况如何。

举个例子。

一个完整的工作示例 - 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);
    }

这里有一些问题。

应onclick: onclick=

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

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

相关文章：