Add table row with JavaScript onclick

javascript add rows to table dynamically
add row to table on button click in javascript
javascript append row to table
how to add data in html table dynamically using javascript
how to add row in html table dynamically using jquery
how to add textbox dynamically in table using javascript
create dynamic table in javascript
javascript insert row at end of table

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.

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

HTML DOM Table insertRow() Method, Insert new row(s) at the first position of a table (and insert a <td> element with some Create an empty <tr> element and add it to the 1st position of the table: javascript add on click event on table rows. The html table. The javascript function that adds on click event on each row in the table. The function takes the table id as the parameter and return a callback with the row object on each row when it is clicked.

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.

Dynamically Add or Remove Table Rows in JavaScript and Save , setAttribute('onclick', 'removeRow(this)'); The value this refers the element (the button). It will help identify the row in which the Remove button is located. empTab. I am adding rows to an existing table using JavaScript insertRow method For one cell, I want to add an onclick event. How can I do that using pure JavaScript? I am attaching my code.

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

JavaScript DOM: JavaScript function to add rows to a table , JavaScript: JavaScript function to add rows to a table <input type="button" onclick="insert_Row()" value="Insert row"> </body></html>. dynamically add a table row with onclick. JavaScript / Ajax / DHTML Forums on Bytes.

Add,Edit And Delete Rows From Table Dynamically Using JavaScript, How do you edit a row in a table using JavaScript? To remove rows in the table, I’ll add dynamically created buttons (using JavaScript) in each row of the table. For data entry, I’ll create and add textboxes in each cell, dynamically. The second button will submit the data in the table.

Dynamically Add/Remove rows in HTML table using JavaScript, How add or remove rows inside a table dynamically using jQuery? JavaScript: JavaScript function to add rows to a table. Last update on February 09 2019 08:31:34 (UTC/GMT +8 hours) Write a JavaScript function to add rows to a table.

javascript add on click event on table rows, javascript add on click event on table rows. The html table. The javascript function that adds on click event on each row in the table. The function takes the table id as the parameter and return a callback with the row object on each row when it is clicked. You're close. Just add the row to the tbody instead of table: myTbody.insertRow(); Just get a reference to tBody (myTbody) before use. Notice that you don't need to pass the last position in a table; it's automatically positioned at the end when omitting argument. A live demo is at jsFiddle.

Comments
  • you should have onclick= not :
  • At first glance, onclick:"addField();" should be onclick="addFields();".
  • This is what should be used but I believe you can eliminate the currentIndex when you create a new element with the same name unless he's sending it via GET (I just don't know what the result would be honestly). But the $_POST global is an array that will expand with deltas if repeated inputs are sent.
  • @Deryck Thats true. But not sure, how he is implementing it. :(
  • @thefourtheye very badly I assume, considering I need foreach inside foreach inside foreach to parse all that data, but this works, thank you! Could I add a class to those inputs as well? Like linksBox.setAttribute("class","standard"); added under the first setatrribute line?
  • @SamFisher Yup. You can add. :)
  • Wicked =) I'm going to use the clone version at this specific instance, however, I do need it in a different place to generate the html, so this one comes very handy as well. Thanks again!
  • this is amazing o.o 4 lines of code and they work! I've added it and it works perfect