jQuery添加行表

使用此腳本，您可以將行添加到現有表。但它將行放在現有行之後，但不在行之後。jQuery添加行表

如何讓這個腳本放在最後一行之後？

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" />'; 
}

來源

2016-01-12 Jasper Renema

也給按鈕類型=「按鈕」如果你離開了這一點 – mplungjan

我只是試圖使代碼更清晰的部分有些@mplungjan瀏覽器將提交頁面這是否會導致任何問題？ –

我自己編輯後發現它是一個不必要的編輯。 – mplungjan

變化

var row = table.insertRow(0);

到

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

使每一行被添加到末尾。

來源

2016-01-12 12:34:42

謝謝。現在正在工作 –

既然你已經有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>');

來源

2016-01-12 12:32:36

使用insertRow(-1)默認爲insertRow(0)最後追加行如下。

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" />'; 
}

來源

2016-01-12 12:34:42 Azim

innerHTML將用新內容替換現有內容。

你必須嘗試prepend()

來源

2016-01-12 12:35:11 Butterfly

試試這個，

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

來源

2016-01-12 12:35:29

你可以使用createElement()和appendChild()，而不是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>

來源

2016-01-12 12:36:02

請嘗試此解決方案。

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

來源

2016-01-12 12:48:24

試試這個

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

NewR.appendTo("#myTable");

來源

2016-01-12 12:59:36

jQuery添加行表

回答

相關問題