Javascript add Row, one function for different tables

Question

I have a few tables like this

<table id="table_1">
<tr>
<td><input type="text" name="date[]"</td>
</tr>
</table>

the number of the <td>'s is very variable.

Currently I'm using a function like this:

function addRow(){
var table = document.getElementById('table_1');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0)
....
cell1.innerHTML="<input type='text' name='date[]' />
}

using this method, it would require a custom function for every type of table.

Is there a way, to add a Line to a table, which is exactly the same as the last row? In a table with 7 cells, 7 cells would be added, with the right content.

Is this possible in pure JS?

Start with `.querySelectorAll()` or `.getElementsByTagName()`, etc. — emerson.marini, Aug 22 '14 at 18:04
can you provide an example or tutorial page?, and .getElementsByTagName() is the same problem, the tagName is not know, it varies from table to table — sgtBear, Aug 22 '14 at 18:07
Yes it is possible to have a common function, but please define "_with the right content_". Where is this content taken from? The previous row? — blex, Aug 22 '14 at 18:07
A quick Google search will bring you hundreds of tutorials. That's not the purpose of this site. We're here to help you with issues pointed out in a piece of code. — emerson.marini, Aug 22 '14 at 18:10
usually one row will be in the table, like in my example, the button is to add more lines, in case the user needs more, the content for the appended rows can be taken from the first (hardcoded) row in the table — sgtBear, Aug 22 '14 at 18:12
Refer : http://stackoverflow.com/a/1728578/3603806. Will help solve your problem. Working example : http://jsfiddle.net/thecbuilder/bx326s31/1/ — Himanshu Tyagi, Aug 22 '14 at 18:16
@thecbuilder could you post the fiddle as an answer? so i can accept it =) works perfectly! — sgtBear, Aug 22 '14 at 18:22

blex · Answer 1 · 2014-08-22T18:24:23.587

You could do it this way with jQuery:

Edit: Sorry, I did not see you wanted pure JS.

jQuery

$('button').click(function(){
    var table = $(this).prev('table');
    var lastrow = $('tr:last-child', table).html();
    table.append('<tr>' + lastrow + '</tr>');
});

HTML

<table>
    <tr>
        <th>Name</th>
        <th>Country</th>
        <th>Age</th>
    </tr>
    <tr>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
    </tr>
</table>

<button>Add a row</button>

<table>
    <tr>
        <th>Meal</th>
        <th>Price</th>
    </tr>
    <tr>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
    </tr>
</table>

<button>Add a row</button>

JS Fiddle Demo

score 0 · Accepted Answer · edited May 23 '17 at 10:33

Maybe this is what you need : http://jsfiddle.net/thecbuilder/bx326s31/1/

<input type="button" onclick="cloneRow()" value="Clone Row" />
<input type="button" onclick="createRow()" value="Create Row" />
<table>
    <tbody id="tableToModify">
        <tr id="rowToClone">
            <td><input type="text" name="txt[]"/></td>
            <td>bar</td>
        </tr>
    </tbody>
</table>

function cloneRow() {
    var row = document.getElementById("rowToClone"); // find row to copy
    var table = document.getElementById("tableToModify"); // find table to append to
    var clone = row.cloneNode(true); // copy children too
    clone.id = "newID"; // change id or other attributes/contents
    table.appendChild(clone); // add new row to end of table
}

function createRow() {
    var row = document.createElement('tr'); // create row node
    var col = document.createElement('td'); // create column node
    var col2 = document.createElement('td'); // create second column node
    row.appendChild(col); // append first column to row
    row.appendChild(col2); // append second column to row
    col.innerHTML = "qwe"; // put data in first column
    col2.innerHTML = "rty"; // put data in second column
    var table = document.getElementById("tableToModify"); // find table to append to
    table.appendChild(row); // append row to table
}

Refer : https://stackoverflow.com/a/1728578/3603806

Javascript add Row, one function for different tables

2 Answers2

JS Fiddle Demo