CODEWITHSUNDEEP
javascripthtml
Predrag Beocanin
Predrag Beocanin

Reputation: 1400

Add table row with JavaScript onclick

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.

Upvotes: 5

Views: 65809

Answers (3)

The Alpha
The Alpha

Reputation: 146191

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.

Upvotes: 11

WindsorAndy
WindsorAndy

Reputation: 247

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

Upvotes: 1

thefourtheye
thefourtheye

Reputation: 239443

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

Upvotes: 9

Related Questions