如何将数据添加到 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.