如何將數據添加到 HTML 中的表格
[英]How to add data to a table in HTML
問題描述
我想編寫插入函數，以便在文本框中輸入的數據將轉到新的表格行。 在insertdata()內部，數據應該發送到表的新行。
這是我的代碼：
<div class="banner-info" align="center">
<span><label>Customer Name </label></span>
<span><input type="text" class="text-center" required="" placeholder="Enter Customer Name"></span>
<span><label>Customer Address </label></span>
<span><input type="text" class="text-center" required=""></span>
<span><label>Customer telephone </label></span>
<span><input type="text" class="text-center" required=""></span>
</div>
<div class="logo">
<input type="button" onClick="insertData()">
</div>
<script language="javascript">
function insertData() {
var name=$('')
}
</script>
<table id="t1">
<caption>Customer Table</caption>
<colgroup>
<col span="2" class="c2">
<col>
<col class="c1">
</colgroup>
<thead>
<tr>
<th>
Customer Name
</th>
<th>
Customer Address
</th>
<th>
Customer Telephone
</th>
</tr>
</thead>
</table>
3 個解決方案
解決方案1
1 2017-01-30 11:50:39
在表中插入內容：
function insertData(){
var table = document.getElementById("t1");
var tbody = table.getElementByTagName("tbody");
var newRow = tbody.insertRow(table.rows.length-1);
var newCell = newRow.insertCell(newRow.cells.length);
newCell.innerHTML = "Here we are";
}
在你的情況下，而不是“我們在這里”，檢索輸入字段的內容，並在單元格內添加。
不要忘記在 html 的表格中添加tbody 。
編輯 ：
使用 php，如果你的數據存儲在一個數組中，並且你有一個所有人的數組，你只需要插入：
<tbody>
<?php
foreach($list_of_person as $ person){
?>
<tr>
<td><?=$person["name"]?></td>
<td><?=$person["surname"]?></td>
<td><?=$person["address"]?></td>
</tr>
<?php } ?>
</tbody>
解決方案2
1 2017-01-30 11:52:54
嘗試這個。
<!DOCTYPE html> <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="banner-info" align="center"> <span><label>Customer Name </label></span> <span><input type="text" class="text-center" required="" placeholder="Enter Customer Name" id="CustName"></span> <span><label>Customer Address </label></span> <span><input type="text" class="text-center" required="" id="CustAdd"></span> <span><label>Customer telephone </label></span> <span><input type="text" class="text-center" required="" id="CustTel"></span> </div> <div class="logo"> <input type="button" onClick="insertData()" value="Add"> </div> <script language="javascript"> function insertData() { $("#TableBody").html($("#TableBody").html() + "<tr><td>" + $("#CustName").val() + "</td><td>" + $("#CustAdd").val() + "</td><td>" + $("#CustTel").val() + "<td><tr>"); } </script> <table id="t1"> <caption>Customer Table</caption> <colgroup> <col span="2" class="c2"> <col> <col class="c1"> </colgroup> <thead> <tr> <th> Customer Name </th> <th> Customer Address </th> <th> Customer Telephone </th> </tr> </thead> <tbody id="TableBody"> </tbody> </table> </body> </html>
解決方案3
1 已采納 2017-01-30 12:10:15
也許我猜你可以通過 JavaScript 使用tbody元素（你缺少的）的innerHTML屬性tbody加到它上面，比如
document.getElementById("ID of the tbody element").innerHTML += "<tr><td>" + CustomerName + "</td><td>" + CustomerAddress + "</td><td>" + CustomerTelephone + "</td></tr>";
好吧，我有一個簡單的建議可以讓事情變得更簡單——在輸入字段中使用 ID，以便更容易地獲取值。 喜歡...
<span><label>Customer Name </label></span>
<span><input id="inputCustomerName" type="text" class="text-center" required="" placeholder="Enter Customer Name"></span>
<span><label>Customer Address </label></span>
<span><input id="inputCustomerAddress" type="text" class="text-center" required=""></span>
<span><label>Customer telephone </label></span>
<span><input id="inputCustomerTelephone" type="text" class="text-center" required=""></span>
對於您的 JavaScript 函數，您可以這樣使用：
function insertData() {
var name = document.getElementById("inputCustomerName");
var address = document.getElementById("inputCustomerAddress");
var telephone = document.getElementById("inputCustomerTelephone");
document.getElementById("ID of the tbody part of table").innerHTML += "<tr><td>" + name + "</td><td>" + address + "</td><td>" + telephone + "</td></tr>";
}
最終代碼：
<!-- Just a bit of CSS styling --> <style> table, td, th {border: 1px solid black; border-collapse: collapse;} </style> <div class="banner-info" align="center"> <span><label>Customer Name </label></span> <span><input id="inputCustomerName" type="text" class="text-center" required="" placeholder="Enter Customer Name"></span><br> <span><label>Customer Address </label></span> <span><input id="inputCustomerAddress" type="text" class="text-center" required=""></span><br> <span><label>Customer telephone </label></span> <span><input id="inputCustomerTelephone" type="text" class="text-center" required=""></span><br> </div> <div class="logo"> <input type="button" onClick="insertData()" value="Add entry"> </div> <script language="javascript"> function insertData() { var name = document.getElementById("inputCustomerName").value; var address = document.getElementById("inputCustomerAddress").value; var telephone = document.getElementById("inputCustomerTelephone").value; document.getElementById("insertionPoint").innerHTML += "<tr><td>" + name + "</td><td>" + address + "</td><td>" + telephone + "</td></tr>"; // The below part is to clear the values after the entry is added. document.getElementById("inputCustomerName").value = ""; document.getElementById("inputCustomerAddress").value = ""; document.getElementById("inputCustomerTelephone").value = ""; } </script> <table id="t1"> <caption>Customer Table</caption> <colgroup> <col span="2" class="c2"> <col> <col class="c1"> </colgroup> <thead> <tr> <th>Customer Name</th> <th>Customer Address</th> <th>Customer Telephone</th> </tr> </thead> <tbody id="insertionPoint"> </tbody> </table>
希望能幫助到你！！！
如何使用PHP在mysql數據庫中動態添加html表數據？
[英]How to add dynamically html table data in mysql database using PHP?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.