Question

使用此脚本，您可以向现有表添加行。但是它不是在行之前而是在现有行的前面放置行。

如何让这个脚本在最后一行之后放置行？

HTML：

margin

JS：

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

Answer 1

更改

var row = table.insertRow(0);

到

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

以便每行都添加到最后。

Answer 2

由于您已使用jquery对其进行了标记，我会说使用.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

使用insertRow(-1) insertRow(0)的instaed最后添加一行，如下所示。

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将使用新内容替换现有内容。

你必须尝试prepend()

Answer 5

试试这个，

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

Answer 6

您可以使用 createElement() 和 appendChild() 代替insertRow：

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 7

请尝试此解决方案。

<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

试试这个

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

NewR.appendTo("#myTable");

jquery添加行表

8 个答案: