JavaScriptで要素を追加する

-3

テーブルに新しい行を追加したいとします。したがって私は2つの異なる方法でそれを試しました。私の意見では、どちらもうまくいくはずです。しかし確かにしないでください。最初のアプローチは機能しません。しかし、なぜ？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>

私のアプローチは機能していません。なぜ誰かが知っていますか、私を助けることができますか？

第2のアプローチは、（...正常に動作します）：

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

私は最初のアプローチが機能しない理由で本当に興味があります。誰かがアイデアを持っていますか？

種類は、あなたがtr要素を作成するために逃した

出典

2017-07-15 Math Programmer

は、あなたはここにこの質問を投稿する前に十分にググか？私はこれが非常に共通の要件であると確信しており、それを行う方法を示すポストがたくさんあります。 google検索の最初のリンク - https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow – Yasser

「btn1」、「btn2」、または「btn3」にテキストを入力してから、「btn4」をクリックしました？ – zer00ne

最初のバージョンは '

'にセル（ ''要素）を追加します。関数の名前にもかかわらず、行が追加されていません。 – Andreas

答えて

-1

について。 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 .com/questions/45119115/adding-elements-with-javascript＃comment77209328_45119115）、この質問には現在のところ答えられません。また、2番目のアプローチがうまくいかない理由もあります。答え。 –

あなたはその質問の古いバージョンを見ているかもしれません。 'var neueZeile = docu ment.createElement（ "tr"）; 'は明らかに最初のコード例です。 [このコメント]（https://stackoverflow.com/questions/45119115/adding-elements-with-javascript#comment77209261_45119115）は、必ずしもそうとは限りません。 –

@ T.J.Crowder：はい、2番目のバージョンがうまく動作しているので、古いバージョンの質問に回答しました。私は最初のバージョンで間違いを見つけたので、追加されたans –

JavaScriptで要素を追加する

答えて

関連する問題