如何使用Javascript將文本框和按鈕添加到表中？

Question

抱歉，我是Java語言的新手，這是我制作的第一批網站之一。 我想知道為什么我的代碼無法正常工作。

在應該顯示它們的單元格中，而不是顯示文本框和按鈕，而是顯示了[object HTMLInputElement]和[object HTMLButtonElement]。

function frenchBread(x){
      var table = document.getElementById("orderTable");
      var row = table.insertRow(0);

      var rem = document.createElement("button");
      var name = document.createTextNode("Remove");
      rem.appendChild(name);  

      var num = document.createElement("input");

        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);

        cell1.innerHTML = "French Bread";
        cell2.innerHTML = document.body.appendChild(num);
        cell3.innerHTML = document.body.appendChild(rem);
        x.disabled = true;

  }


<button type = "button" class = "itemClick" onclick  = "frenchBread(this);">French Bread</button>

<table id = "orderTable">
</table>

Answer 1

只需追加變量，無需調用innerHTML ：

cell1.innerHTML = "French Bread";
cell2.appendChild(num);
cell3.appendChild(rem);

代替：

cell1.innerHTML = "French Bread";
cell2.innerHTML = document.body.appendChild(num);
cell3.innerHTML = document.body.appendChild(rem);

小提琴

Answer 2

在對代碼進行調整之前，我添加了一些HTML，以便可以運行它。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button type = "button" class = "itemClick" onclick  = "frenchBread(this);">French Bread</button>
<table id="orderTable"></table>
<script>

function frenchBread(x){
  var table = document.getElementById("orderTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  var rem = document.createElement("button");
  var name = document.createTextNode("Remove");
  rem.appendChild(name);  

  var num = document.createElement("input");

    cell1.innerHTML = "French Bread";
    cell2.appendChild(num);
    cell3.appendChild(rem);
    x.disabled = true;
}
</script>
</body>
</html>

您的代碼失敗的原因是您分配給cel1的innerHTML的文本“ French Bread”是有效的HTML。innerHTML只能接受有效HTML的字符串。由於rem和num是DOM，因此它不適用於cel2和cel3。因此，可以使用這兩個單元格元素的appendChild成員函數將它們分配為cel2和cel3（也是DOM元素）的子代。您試圖通過innerHTML做到這一點，JavaScript必須將這些DOM元素轉換為文本，因此您看到的文本是由於JS對象轉換為字符串而產生的。

如何使用Javascript將文本框和按鈕添加到表中？

問題描述

2 個解決方案

解決方案1
0 已采納 2015-01-15 02:56:02

解決方案2
0 2015-01-15 03:42:16

如何使用Javascript將文本框和按鈕添加到表中？

問題描述

2 個解決方案

解決方案1 0 已采納 2015-01-15 02:56:02

解決方案2 0 2015-01-15 03:42:16

解決方案1
0 已采納 2015-01-15 02:56:02

解決方案2
0 2015-01-15 03:42:16