使用JavaScript添加元素

-3

我想向表中添加新行。所以我嘗試了兩種不同的方式。在我看來，兩者都應該工作。但的確如此。第一種方法不起作用。但爲什麼？使用JavaScript添加元素

第一種方法（不工作...）：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
      <title>Table</title> 
     <script type="text/javascript"> 
      function addLine(nr, name, date) { 
      var neueZeile = document.createElement("tr"); 
      var neuerEintrag1 = document.createElement("td"); 
      var neuerText1 = document.createTextNode(nr); 
      var neuerEintrag2 = document.createElement("td"); 
      var neuerText2 = document.createTextNode(name); 
      var neuerEintrag3 = document.createElement("td"); 
      var neuerText3 = document.createTextNode(date); 
      neuerEintrag1.appendChild(neuerText1); 
      neuerEintrag2.appendChild(neuerText2); 
      neuerEintrag3.appendChild(neuerText3); 
      neueZeile.appendChild(neuerEintrag1); 
      neueZeile.appendChild(neuerEintrag2); 
      neueZeile.appendChild(neuerEintrag3); 

      var parentN = document.getElementById("myTable"); 
      parentN.appendChild(neueZeile);    
     </script> 
      <link rel="stylesheet" type="text/css" href="Website.css" /> 
    </head> 
    <body> 
     <table class="table" id="myTable"> 
      <thead> 
       <td>Nr.</td> 
       <td>Name</td> 
       <td>Datum</td> 
      </thead> 
      <tr> 
       <td>1</td> 
       <td>Max</td> 
       <td>01.01.2001</td> 
      </tr> 
     </table> 

     <form name=addRow> 
      Nr.: 
      <input type=text name=btn1> 
       Name: 
       <input type=text name=btn2> 
        Date: 
        <input type=text name=btn3> 
         <input type=button name=btn4 value=ADD 
          onclick="addLine(btn1.value,btn2.value,btn3.value)"> 
     </form> 


     <input type=button name=btn5 value=DeleteLastAddedRow onclick="deleteRow()"> 


      <a class="back" href="Website.html">Zurück</a> 
    </body> 
</html>

我的做法是行不通的。有人知道爲什麼或可以幫助我嗎？

第二條本辦法（正常工作...）：

 function addLine(nr, name, date) { 
     var table = document.getElementById("myTable"); 
     var row = table.insertRow(); 
     var cell1 = row.insertCell(0); 
     var cell2 = row.insertCell(1); 
     var cell3 = row.insertCell(2); 
     cell1.innerHTML = nr; 
     cell2.innerHTML = name; 
     cell3.innerHTML = date; 
     }

我在爲什麼第一種方法是行不通的真正興趣。有人有想法嗎？

親切的問候

來源

2017-07-15 Math Programmer

你確定你在這裏張貼了這個問題之前，谷歌搜索還不夠嗎？我相信這是一個非常普遍的要求，並且有大量的帖子顯示如何去做。谷歌搜索的第一個鏈接 - https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow – Yasser

你在'btn1'，'btn2'或者'btn3'中輸入了任何文本，然後點擊'btn4' ？ – zer00ne

第一個版本向「

」添加單元（''元素）。儘管該函數的名稱沒有添加行。 – Andreas

回答

-1

你錯過了創造tr元素。創建tr並將其附加到table，然後全部td到新的tr。

這裏是工作的代碼

function addLine(nr, name, date) { 
 
    var neuerEintrag1 = document.createElement("td"); 
 
    var neuerText1 = document.createTextNode(nr); 
 
    var neuerEintrag2 = document.createElement("td"); 
 
    var neuerText2 = document.createTextNode(name); 
 
    var neuerEintrag3 = document.createElement("td"); 
 
    var neuerText3 = document.createTextNode(date); 
 
    neuerEintrag1.appendChild(neuerText1); 
 
    neuerEintrag2.appendChild(neuerText2); 
 
    neuerEintrag3.appendChild(neuerText3); 
 

 
    var parentN = document.getElementById("myTable"); 
 
    var row = document.createElement("tr"); 
 
    parentN.appendChild(row); 
 
    row.appendChild(neuerEintrag1); 
 
    row.appendChild(neuerEintrag2); 
 
    row.appendChild(neuerEintrag3); 
 
}

<table class="table" id="myTable"> 
 
    <thead> 
 
    <td>Nr.</td> 
 
    <td>Name</td> 
 
    <td>Datum</td> 
 
    </thead> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>Max</td> 
 
    <td>01.01.2001</td> 
 
    </tr> 
 
</table> 
 

 
<form name=addRow> 
 
    Nr.: 
 
    <input type=text name=btn1> Name: 
 
    <input type=text name=btn2> Date: 
 
    <input type=text name=btn3> 
 
    <input type=button name=btn4 value=ADD onclick="addLine(btn1.value,btn2.value,btn3.value)"> 
 
</form>

來源

2017-07-15 14:25:05

代碼轉儲不是*有用的*答案，[由於OP的代碼工作]（https：// stackoverflow/question/45119115/adding-elements-with-javascript＃comment77209328_45119115），這個問題現在還不能回答，而且問題在於爲什麼第二種方法不起作用，這基本上只是第一種方法複製到答案 –

你可能一直在看這個問題的過時版本，var'neueZeile = docu ment.createElement（「tr」）;'顯然是在第一個代碼示例中。 [此評論]（https://stackoverflow.com/questions/45119115/adding-elements-with-javascript#comment77209261_45119115）表明它可能並不總是。 –

@ T.J.Crowder：是的，我回答了問題的老版本，因爲第二個版本運行良好。我只在第一個版本中發現錯誤，所以添加了ans –

相關問題