使用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] 。