最终代码：

Question

我想编写插入函数，以便在文本框中输入的数据将转到新的表格行。在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>

Answer 1

在表格中插入内容：

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>

Answer 2

试试这个。

＆＃13;

<!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>

＆＃13;

Answer 3

也许我猜您可以通过JavaScript使用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>";
}

最终代码：

＆＃13;

<!-- 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>

＆＃13;

希望它有所帮助!!!

如何在HTML

3 个答案:

最终代码：