テキストボックスの値を取得してテーブルに設定します

Question

誰かがtextboxの値を渡して、JavaScriptを使用してテーブルに設定するのを手伝ってください。私は初心者や、この質問のために申し訳ありません:(ここで

Enter name: <input type="text" name="name"> 

<button type="button"> Add to table</button> 

<table id="mytable"> 
<thead> 
    <tr> 
    <th>Name</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td></td> 
    </tr> 
</tbody> 
</table> 

Answer 1

は、ソリューションです。

var field = document.getElementById("value"); 
 
var button = document.querySelector('button'); 
 

 
if (button) { 
 
    button.addEventListener('click', addValue, false); 
 
} 
 

 
function addValue() { 
 
    if (field.value !== '') { 
 
    var table = document.querySelector('#content'); 
 

 
    var tr = document.createElement('tr'); 
 
    var td = document.createElement('td'); 
 

 
    td.innerText = field.value; 
 
    tr.appendChild(td); 
 
    table.appendChild(tr); 
 
    field.value = ''; 
 
    } 
 
}

Enter name: 
 
<input type="text" name="name" id='value'> 
 

 
<button type="button">Add to table</button> 
 

 
<table id="mytable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id='content'> 
 
    </tbody> 
 
</table>