动态地向表中添加数据

我试图动态地将行添加到表中，但它将两个文本框的数据连接起来，然后将其添加到第一个<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

那么，你只能创建一个''。 'tdNode'不是两个表格单元格。 – Xufox

需要创建两个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

谢谢@ayan工作得很好。 – Nevi

我们该如何添加删除按钮？：并编辑？ :) – Nevi

@Nevi和SO最好的感谢是upvotes。 –

动态地向表中添加数据

回答

相关问题