JavaScript - 在 HTML 表中動態添加表行

Question

我有以下腳本，我想通過它在我的網站上的 HTML 表中動態添加行：

<script>
var globalIterationVariable = 0;
document.onload = $globalIterationVariable = 1;
$('document').ready(function() {
  $('.add_another').click(function() {
      var globalIterationVariable;
      var newRowVariable = '<tr><td><center><input name="nazovPolozky';
      newRowVariable.append(String($globalIterationVariable));
      newRowVariable.append(' type="text"></center></td> <td><center><input name="pocetPolozky');
      newRowVariable.append(String($globalIterationVariable));
      newRowVariable.append('" type="number" step="1" min="1"></center></td> <td><center><input name="jednotkovaCenaPolozky');
      newRowVariable.append(String($globalIterationVariable));
      newRowVariable.append('" type="number" step="0.01" min="0.01"></center></td></tr>');
      alert(String(newRowVariable));
      $("#tbl").append(String(newRowVariable));
      globalIterationVariable++
   });
});
</script>

這個腳本雖然給了我以下錯誤：

Uncaught TypeError: newRowVariable.append is not a function

任何人都可以請幫我讓這個腳本工作嗎？

謝謝你。

PS：一旦我在我的網站上按下具有 class='button add_another' 的特定按鈕，就會啟動此腳本

Answer 1

您應該將newRowVariable定義為 DOM 元素 ->

const newRowVariable = document.createElement('tr')

然后 append 的內容（你的字符串）到它 - >

newRowVariable.innerHTML = `<td><center><input name="nazovPolozky ${$globalIterationVariable}" type="text"></center></td>

注意我使用 `` 而不是 '' 或 ""，這是因為你可以在這樣的字符串中使用 javascript 變量 ->

const text = "World"
const superString = `Hello ${text}`
// a console.log(superString) will return 'Hello World'

Jquery 在您完全是初學者時可能會很有用，但您很快就會發現使用純 javascript 會更簡單；）

Answer 2

這是一個字符串

 var newRowVariable = '<tr><td><center><input name="nazovPolozky';

這是 jQuery object

 var newRowVariable = $('<tr><td><center><input name="nazovPolozky');

這就是你如何 append 一個字符串到一個字符串

 var newRowVariable = '<tr><td><center><input name="nazovPolozky';
 newRowVariable += "/></td></tr>";