html - Add table row with JavaScript onclick - Stack Overflow

admin管理员组

文章数量:1296401

I'm trying to add the exact same element found below using javascript. I've tried all the solutions found here, I even tried to echo the element with php echo but no luck. There is no need to change any input names, or anything like that, simply on click of that button, add another row to the table, and that's it.

Here's the element:

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

I'm up for anything really, however, I'd like javascript as I kept my system without any external reference (such as jquery) but at this point I'm open to any suggestions. I tried doing it with the following code:

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

But it doesn't seem to do anything. I assume I should handle the code knowing which input is last in a better way than id="last" but I have no clue how to do it.

I'm trying to add the exact same element found below using javascript. I've tried all the solutions found here, I even tried to echo the element with php echo but no luck. There is no need to change any input names, or anything like that, simply on click of that button, add another row to the table, and that's it.

Here's the element:

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

I'm up for anything really, however, I'd like javascript as I kept my system without any external reference (such as jquery) but at this point I'm open to any suggestions. I tried doing it with the following code:

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

But it doesn't seem to do anything. I assume I should handle the code knowing which input is last in a better way than id="last" but I have no clue how to do it.

• javascript
• html

Share Improve this question Follow edited Oct 5, 2013 at 16:35 The Alpha 146k2929 gold badges293293 silver badges311311 bronze badges asked Oct 5, 2013 at 16:21 Predrag BeocaninPredrag Beocanin 1,40033 gold badges1818 silver badges2525 bronze badges 2

• 1 you should have onclick= not : – WindsorAndy Commented Oct 5, 2013 at 16:29
• At first glance, onclick:"addField();" should be onclick="addFields();". – The Alpha Commented Oct 5, 2013 at 16:32

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 11

You may achieve same thing using following

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

Also, remove the id from input, because an ID must be unique and remember you are using same names for all of your inputs, here, so, names should be named as links[] , keywords[] and violationtype[] to use them as array, but not sure what is your case.

An Example.

A complete working example - http://jsfiddle.net/QmHdL/

Table can be created like this

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

Now, addField has to be implemented like this

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

There are a few problems here..

The onclick: should be onclick=

Then you're appending to the element with id 'last' which is an input element - you can't append to that. Give your table an ID and append to that instead if you want to add a row, otherwise create some other element - div/span with an ID and append to that if the whle table is to bee created from scratch

Then - you can't append HTML like that; you need to either create an new table row element and append that or use [element].innerHTML += [your new row HTML].

本文标签： htmlAdd table row with JavaScript onclickStack Overflow