0

输入输入字段后，我在给定的“id”上附加了一行，但它没有附加。 

function myfunction() {
  var obj = "<tr><td>" + document.getElementById("name").value + "</td><td>" + document.getElementById("num").value + "</td><td>" + document.getElementById("address").value + "</td></tr>";
  document.getElementById("table").innerHTML = obj;
}
<table>
  <tr>

    <td>Name: <input type="text" id="name"></td>

    <td>Age:<input type="number" id="num"></td>

    <td>Address:<input type="text" id="address"></td>
    <td><input type="button" onclick="myfunction()" value="click on me"></td>
  </tr>
  <tbody id="table">

  </tbody>

</table>

4

5 回答 5

1

编辑：你有几个错字：

  • 你写“innnnerHtml”（3n）而不是“innerHtml”
  • 通过编写innerHtml = obj替换所选 div 中的所有 html（您的情况下的表），您必须使用“+=”

您使用innerHtml属性而不是append功能。

function myfunction(){
var obj = "<tr><td>" + document.getElementById("name").value + "</td><td>" + document.getElementById("num").value + "</td><td>" + document.getElementById("address").value + "</td></tr>";
  document.getElementById("table").innerHTML += obj;
}


// an other way to do it
function myfunction2() {

  var line = document.createElement("tr");
  
  var td1 = document.createElement("td");
  td1.append(document.getElementById("name").value);
  
  var td2 = document.createElement("td");
  td2.append(document.getElementById("num").value);
  
  var td3 = document.createElement("td");
  td3.append(document.getElementById("address").value);
  
  line.append(td1);
  line.append(td2);
  line.append(td3);
  
  document.getElementById("table").append(line)


}
<table>
  <tr>

    <td>Name: <input type="text" id="name"></td>

    <td>Age:<input type="number" id="num"></td>

    <td>Address:<input type="text" id="address"></td>
    <td><input type="button" onclick="myfunction()" value="click on me"></td>
    <td><input type="button" onclick="myfunction2()" value="other way"></td>
  </tr>
  <tbody id="table">

  </tbody>

</table>

于 2019-08-26T13:12:37.863 回答
1

最好打电话appendChild而不是innerHTML.

UsingappendChild将新的 DOM 元素添加到父节点的末尾，同时innerHTML获取父节点的现有 DOM 内容，将其作为字符串处理，并使用从该字符串生成的 DOM 元素覆盖父节点的现有元素。

但是，在 Javascript 中，我们有几个类似的函数insertRow可以帮助您更多。请参阅示例：

function myfunction() {

    var name = document.getElementById("name").value,
      num = document.getElementById("num").value,
      address = document.getElementById("address").value;
  
    var tbody = document.getElementById("table");
    addRow(tbody, name, num, address);
}

function addRow(tbody, name, num, address){
  var row = tbody.insertRow();
  addCell(row, name, 0);
  addCell(row, num, 1);
  addCell(row, address, 2);
}

function addCell(row, cellText, index){
  var cell = row.insertCell(index);
  cell.appendChild(document.createTextNode(cellText));
}
<table>
  <tr>

    <td>Name: <input type="text" id="name"></td>

    <td>Age:<input type="number" id="num"></td>

    <td>Address:<input type="text" id="address"></td>
    <td><input type="button" onclick="myfunction()" value="click on me"></td>
  </tr>
  <tbody id="table">

  </tbody>

</table>

于 2019-08-26T13:33:52.797 回答
0

试试这个代码

html代码

<table id="table">
  <tr>
    <td>Name: <input type="text" id="name"></td>

    <td>Age:<input type="number" id="num"></td>

    <td>Address:<input type="text" id="address"></td>
    <td><input type="button" onclick="myfunction()" value="click on me"></td>
  </tr>
  <tbody >

  </tbody>

</table>

javascript函数

    function myfunction() {
                var obj = "<tr><td>Name:" + document.getElementById("name").value + "</td><td>Age: " + document.getElementById("num").value + "</td><td>Address:" + document.getElementById("address").value + "</td></tr>";

               $('#table tbody').append(obj);
             // document.getElementById("table").innnerHTML = obj;
 }
于 2019-08-26T13:26:03.290 回答
0

试试这个代码。它会帮助你。

function myfunction() {
  var obj = "<tr><td>" + document.getElementById("name").value + "</td><td>" + 
  document.getElementById("num").value + "</td><td>" + 
  document.getElementById("address").value + "</td></tr>";
  table.innerHTML  = obj;
}
于 2019-08-26T13:46:48.347 回答
-2

使用它并注意以下事项：

  1. 你的表结构。
  2. innerHTML 中的错字
  3. 您的脚本旨在覆盖而不是附加。

function myfunction() {
  var obj = "<tr><td>" + document.getElementById("name").value + "</td><td>" + document.getElementById("num").value + "</td><td>" + document.getElementById("address").value + "</td></tr>";
  document.getElementById("table").innerHTML += obj;

		console.log(obj);
}
<table>
  <tbody id="table">

  <tr>

    <td>Name: <input type="text" id="name"></td>

    <td>Age:<input type="number" id="num"></td>

    <td>Address:<input type="text" id="address"></td>
    <td><input type="button" onclick="myfunction()" value="click on me"></td>
  </tr>
  </tbody>

</table>

于 2019-08-26T13:19:59.050 回答