JavaScriptで表に行を挿入する

Question

javascriptオブジェクトを含む表に新しい行を挿入しようとしています。

HTMLは次のようになります。

var table = document.getElementById("userTable"); 
 

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

 
var fn = document.createTextNode(user.firstname); 
 
var ln = document.createTextNode(user.lastname); 
 
var score = document.createTextNode(user.score); 
 

 
td.appendChild(fn); 
 
td.appendChild(ln); 
 
td.appendChild(score); 
 

 
tr.appendChild(td); 
 
table.appendChild(tr);

<table id="userTable"> 
 
    <thead> 
 
    <th>First Name</th> 
 
    <th>Last Name</th> 
 
    <th>Score</th> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

私がいる問題は見出しに別々のTDの対応とは対照的に、現在、それは、1つのTDにすべてのデータを追加することです。どのようにデータを別々のセルに追加できますか？テーブルを作成するために
insertRow()とinsertCell()：

Answer 1

var table = document.getElementById("userTable"); 

    var tr = document.createElement("tr"); 
    var td1 = document.createElement("td"); 
    var td2 = document.createElement("td"); 
    var td3 = document.createElement("td"); 

    var fn = document.createTextNode(user.firstname); 
    var ln = document.createTextNode(user.lastname); 
    var score = document.createTextNode(user.score); 

    td1.appendChild(fn); 
    td2.appendChild(ln); 
    td3.appendChild(score); 

    tr.appendChild(td1); 
    tr.appendChild(td2); 
    tr.appendChild(td3); 

    table.appendChild(tr); 

Answer 2

var table = document.getElementById("userTable"); 
 
var tableBody = document.getElementById("tableBody"); 
 

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

 
    var fn = document.createTextNode("James"); 
 
    var ln = document.createTextNode("Bond"); 
 
    var score = document.createTextNode("007"); 
 

 
    td.appendChild(fn); 
 
    td.appendChild(ln); 
 
    td.appendChild(score); 
 

 
    tr.appendChild(td); 
 
    tableBody.appendChild(tr);

<table id="userTable"> 
 
    <thead> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Score</th> 
 
    </thead> 
 
    <tbody id="tableBody"> 
 
    </tbody> 
 
</table>

もう一つは、3つのTDS代わりのように、 createElement("tr")利用機能を使用して要素を作成する

Answer 3

を作成する必要があります。あなたは3種類のTDを作成し、それらの各テキストを追加する必要が

var user = { 
 
    firstname: "foo", 
 
    lastname: "bar", 
 
    score: 30 
 
} 
 

 
// getting reference to table 
 
var table = document.getElementById("userTable"); 
 

 
// creating table row -> where 1 is index 
 
var row = table.insertRow(1); 
 

 
// creating cells 
 
var cell1 = row.insertCell(0); 
 
var cell2 = row.insertCell(1); 
 
var cell3 = row.insertCell(2); 
 

 
// feeding data to the cells 
 
cell1.innerHTML = user.firstname 
 
cell2.innerHTML = user.lastname 
 
cell3.innerHTML = user.score

td { 
 
    border: 1px solid green; 
 
}

<table id="userTable"> 
 
    <thead> 
 
    <th>First Name</th> 
 
    <th>Last Name</th> 
 
    <th>Score</th> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

Answer 4

。

ただし、より簡単なinsertRow()とinsertCell()の方法を使用することを検討してください。

HTML：：

<table > 
    <thead> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Score</th> 
    </thead> 
    <tbody id="userTable"> 
    </tbody> 
</table> 

JS：（もちろん、あなたがここでループを使用することを好むだろう）

あなたはTBODY要素ではなく、テーブルをターゲットにする必要があります

var table = document.getElementById("userTable"); 

var newRow = table.insertRow(-1); 

var newCell = newRow.insertCell(-1); 
var newText = document.createTextNode(user.firstname); 
newCell.appendChild(newText); 

var newCell = newRow.insertCell(-1); 
var newText = document.createTextNode(user.lastname); 
newCell.appendChild(newText); 

var newCell = newRow.insertCell(-1); 
var newText = document.createTextNode(user.score); 
newCell.appendChild(newText); 

https://jsfiddle.net/1sg3ojkq/

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCell