テーブルにデータを動的に追加する

テーブルに行を動的に追加しようとしていますが、両方のテキストボックスのデータを連結して最初の<td>に追加すると、何が問題になりますか？テーブルにデータを動的に追加する

function AddDataToTable() { 
 
    var id = document.getElementById("id1").value; 
 
    var firstname = document.getElementById("firstname").value; 
 
    var trNode = document.createElement("tr"); 
 
    var tdNode = document.createElement("td"); 
 
    trNode.appendChild(tdNode); 
 
    var trID = document.createTextNode(id); 
 
    var trFirstName = document.createTextNode(firstname); 
 
    tdNode.appendChild(trID); 
 
    tdNode.appendChild(trFirstName); 
 
    document.getElementById("productable").appendChild(trNode); 
 
}

<table id="productable" border="1"> 
 
    <tr> 
 
    <th>ID</th> 
 
    <th>Item</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>Shoes</td> 
 
    </tr> 
 
</table> 
 
<br/> 
 
<input type="text" name="id" id="id1"> 
 
<input type="text" name="firstname" id="firstname"> 
 
<input type="button" onclick="AddDataToTable()" value="Add" />

出典

2016-08-04 Nevi

あなたはjsfiddleのようなものの、直接SO上のコードスニペットを作成することができます。 –

@EmileBergeron大丈夫です。 – Nevi

さて、あなたは ''の1つしか作成していません。 'tdNode'は2つのテーブルセルではありません。 – Xufox

2つのtd要素を作成し、それらに二回、各テキストノードを追加する必要があります。

function AddDataToTable() { 
 
    var productable = document.getElementById("productable"); 
 
    var id = document.getElementById("id1").value; 
 
    var firstname = document.getElementById("firstname").value; 
 
    var trNode = document.createElement("tr"); 
 
    // creating a delete button. 
 
    var btn = document.createElement("BUTTON"); 
 
    btn.innerHTML = 'delete'; 
 
    btn.addEventListener("click", function() { 
 
    
 
    productable.removeChild(trNode); 
 
    }); 
 
    
 
    var tdNode1 = document.createElement("td"); 
 
    var tdNode2 = document.createElement("td"); 
 
    trNode.appendChild(tdNode1); 
 
    trNode.appendChild(tdNode2); 
 
    trNode.appendChild(btn); 
 
    var trID = document.createTextNode(id); 
 
    var trFirstName = document.createTextNode(firstname); 
 
    tdNode1.appendChild(trID); 
 
    tdNode2.appendChild(trFirstName); 
 
    document.getElementById("productable").appendChild(trNode); 
 
}

#productable, 
 
th, 
 
td { 
 
    border: 1px dotted grey; 
 
} 
 
td { 
 
    padding: 20px; 
 
} 
 
th { 
 
    text-align: center; 
 
}

<title>Table</title> 
 

 
<body> 
 
    <table id="productable"> 
 
    <tr> 
 
     <th>ID</th> 
 
     <th>Item</th> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Shoes</td> 
 
    </tr> 
 
    </table> 
 
    <br/> 
 
    <input type="text" name="id" id="id1"> 
 
    <input type="text" name="firstname" id="firstname"> 
 
    <input type="button" onclick="AddDataToTable()" value="Add" /> 
 
</body>

出典

2016-08-04 03:02:55 Ayan

感謝@ヤヤンは非常にうまく動作します。 – Nevi

削除ボタンを追加するにはどうすればよいですか？：また編集？ :) – Nevi

@NeviとSOの最高のおかげでupvotesです。 –

テーブルにデータを動的に追加する

答えて

関連する問題