jquery add row table

Question

With this script you can add rows to an existing table. But it puts the row not after but in front of existing rows.

How to get this script to put rows after the last?

HTML :

<button onclick="myFunction()">Voeg meer tickets toe</button>

JS :

function myFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    cell1.innerHTML = '<input type="text" name="naamoptie2[0]" class="simple_field" placeholder="Naam van optie/onderdeel" required style="padding: 10px 10px;" />';
    cell2.innerHTML = '€ <input type="number" name="prijsticket[0]" class="simple_field" placeholder="100" required  style="padding-top: 5px; padding-bottom: 5px; min-height: 30px;"  step="any" />';
    cell3.innerHTML = '<input type="number" name="aantaltickets2[0]" class="simple_field" required style="padding-top: 5px; padding-bottom: 5px; min-height: 30px;" placeholder="aantaltickets"  />';
    cell4.innerHTML = '<input type="text" name="onderdeelnummer[0]" class="simple_field"  required style="padding: 10px 10px; margin-top: 10px;" placeholder="Onderdeelnummer"  />';
    cell5.innerHTML = '<input type="text" name="categorienummer[0]" class="simple_field"  required style="padding: 10px 10px; margin-top: 10px;"  placeholder="Categorienummer" />';
}

Answer 1

Change

var row = table.insertRow(0);

to

var row = table.insertRow( table.rows.length );

so that each row is added to the end.

Answer 2

Since you have tagged it with jquery , I would say use .prepend() :

var table = $("#myTable");
table.prepend('<tr><td><input type="text" name="naamoptie2[0]" class="simple_field" placeholder="Naam van optie/onderdeel" required style="padding: 10px 10px;" /></td></tr>');

Answer 3

Use insertRow(-1) instaed of insertRow(0) to append row at last like below.

function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = '<input type="text" name="naamoptie2[0]" class="simple_field" placeholder="Naam van optie/onderdeel" required style="padding: 10px 10px;" />';
cell2.innerHTML = '€ <input type="number" name="prijsticket[0]" class="simple_field" placeholder="100" required  style="padding-top: 5px; padding-bottom: 5px; min-height: 30px;"  step="any" />';
    cell3.innerHTML = '<input type="number" name="aantaltickets2[0]" class="simple_field" required style="padding-top: 5px; padding-bottom: 5px; min-height: 30px;" placeholder="aantaltickets"  />';
        cell4.innerHTML = '<input type="text" name="onderdeelnummer[0]" class="simple_field"  required style="padding: 10px 10px; margin-top: 10px;" placeholder="Onderdeelnummer"  />';
            cell5.innerHTML = '<input type="text" name="categorienummer[0]" class="simple_field"  required style="padding: 10px 10px; margin-top: 10px;"  placeholder="Categorienummer" />';
}

Answer 4

innerHTML will replace the existing content with new content.

you have to try prepend()

Answer 5

尝试这个，

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

Answer 6

You could use createElement() and appendChild() instead of insertRow :

 function myFunction() { var table = document.getElementById("myTable"); var row = document.createElement('tr'); //Create row var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); var cell4 = row.insertCell(3); var cell5 = row.insertCell(4); cell1.innerHTML = '<input type="text" name="naamoptie2[0]" class="simple_field" placeholder="Naam van optie/onderdeel" required style="padding: 10px 10px;" />'; cell2.innerHTML = '€ <input type="number" name="prijsticket[0]" class="simple_field" placeholder="100" required style="padding-top: 5px; padding-bottom: 5px; min-height: 30px;" step="any" />'; cell3.innerHTML = '<input type="number" name="aantaltickets2[0]" class="simple_field" required style="padding-top: 5px; padding-bottom: 5px; min-height: 30px;" placeholder="aantaltickets" />'; cell4.innerHTML = '<input type="text" name="onderdeelnummer[0]" class="simple_field" required style="padding: 10px 10px; margin-top: 10px;" placeholder="Onderdeelnummer" />'; cell5.innerHTML = '<input type="text" name="categorienummer[0]" class="simple_field" required style="padding: 10px 10px; margin-top: 10px;" placeholder="Categorienummer" />'; table.appendChild(row); //Append row } 

 <button onclick="myFunction()">Voeg meer tickets toe</button> <table id='myTable' border='1'></table> 

Answer 7

Please try this solution.

<body>
    <table id="myTable">

    </table>
    <button onclick="myFunction()">Voeg meer tickets toe</button>

    <script>
        function myFunction() {
            var table = document.getElementById("myTable");
            var len = table.rows.length;
            var row = table.insertRow(-1);
            row.id = "row_" + len;
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            var cell5 = row.insertCell(4);
            cell1.innerHTML = '<input type="text" name="naamoptie2[0]" class="simple_field" placeholder="Naam van optie/onderdeel" required style="padding: 10px 10px;" />';
            cell2.innerHTML = '<input type="number" name="prijsticket[0]" class="simple_field" placeholder="100" required  style="padding-top: 5px; padding-bottom: 5px; min-height: 30px;"  step="any" />';
            cell3.innerHTML = '<input type="number" name="aantaltickets2[0]" class="simple_field" required style="padding-top: 5px; padding-bottom: 5px; min-height: 30px;" placeholder="aantaltickets"  />';
            cell4.innerHTML = '<input type="text" name="onderdeelnummer[0]" class="simple_field"  required style="padding: 10px 10px; margin-top: 10px;" placeholder="Onderdeelnummer"  />';
            cell5.innerHTML = '<input type="text" name="categorienummer[0]" class="simple_field"  required style="padding: 10px 10px; margin-top: 10px;"  placeholder="Categorienummer" />';
        }

    </script>
</body>

Answer 8

try this

var NewR = $("#myTable tr:last").clone();

NewR.appendTo("#myTable");