は、プレーンJSを持つテーブルにデータを追加することはできません

function addData() { 
 

 
    var rows = ""; 
 
    var ID = document.getElementById("id").value; 
 
    var Task = document.getElementById("task").value; 
 
    rows += "<tr><td>" + ID + "</td><td>" + Task + "</td></tr>"; 
 
    var tbody = document.querySelector("#table tbody"); 
 
    var tr = document.createElement("tr"); 
 

 
    tr.innerHTML = rows; 
 
    tbody.appendChild(tr) 
 
}

<body> 
 
    <form onsubmit="" method="POST"> 
 
    ID: 
 
    <input type="text" id="id" required>New task: 
 
    <br> 
 
    <textarea id="task" required></textarea> 
 
    <br> 
 
    <input type="submit" value="Add" onclick="addData()"> 
 
    </form> 
 

 
    <h3>Task Table</h3> 
 
    <div id="excell"> 
 
    <table id="table" cellspacing="0px" cellpadding="25px" text-align="center"> 
 
     <thead> 
 
     <tr> 
 
      <td>ID</td> 
 
      <td>Task</td> 
 
     </tr> 
 
     </thead> 
 

 
     <tbody> 
 

 
     </tbody> 
 
    </table> 
 
    </div> 
 
</body>

私はJavascriptを学んでいると私は小さな「IDとタスク」テーブルを実装しようとしているんだけど、何とかそれはときにのみ機能しますI私は2つのデータを同時に入力すると何も起こらない、IDまたはタスクだけのような1種類のデータだけを入力してください。問題が何であるか教えてくれたら、どうすればいいのでしょうか？ありがとうございました。

は、ここに私のHTML

<body> 
<form onsubmit="" method="POST"> 
    ID: 
    <input type="text" id="id" required> 

    New task:<br> 
    <textarea id="task" required></textarea> 
    <br> 
<input type="submit" value="Add" onclick="addData()"> 
</form> 

<h3>Task Table</h3> 
<div id = "excell"> 
     <table id = "table" cellspacing = "0px" cellpadding = "25px" text-align = "center"> 
      <thead> 
       <tr> 
        <td>ID</td> 
        <td>Task</td> 
       </tr> 
      </thead> 

      <tbody> 

      </tbody> 
     </table> 
</div> 
</body>

だとここにあなたのコードと私のJS

function addData() { 

      var rows = ""; 
      var ID = document.getElementById("id").value; 
      var Task = document.getElementById("task").value; 
      rows += "<tr><td>" + ID + "</td><td>" + Task + "</td></tr>"; 
      var tbody = document.querySelector("#table tbody"); 
      var tr = document.createElement("tr"); 

     tr.innerHTML = rows; 
     tbody.appendChild(tr) 
}

出典

2016-10-24 ricster

うまくいきます。あなたのコードに問題はありません。 – Mahi

フォームが1つしかない場合、どのように2つのデータを同時に追加できますか？ – Mahi

ああ、データごとに異なるフォームが必要ですか？私はそれを知らなかった、私はすぐに別のものを追加します、ありがとう。 – ricster

実際の問題は、あなたが送信ボタンを使用していているのです。通常、送信ボタンがクリックされると、データをフォームタグのactionプロパティにポストします。これはページを次のページに転送することを意味します。アクションプロパティが与えられていない場合は、ちらつき効果を与え、現在のページに留まり、すべてのコンポーネントを空にします。あなたのコードでも同じことが起こります。ベター変更

<input type="BUTTON" value="Add" onClick="addData();"/>

及びその加工された罰金を試すにコード

<input type="Submit" value="Add" onClick="addData();"/>

。

出典

2016-10-24 07:29:00 Vijayakumar

は、プレーンJSを持つテーブルにデータを追加することはできません

答えて

関連する問題