-3

我想写入插入函数，以便输入到文本框中的数据将转到新的表格行。在insertdata()里面，数据应该发送到表格的新行。如何将数据添加到HTML表中

这里是我的代码：

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

来源

2017-01-30 Ramindu Samarawickrama

下''元素添加''然后在您的函数创建元素''，创建元素''，追加'td'到'，tr'并在最后追加'tr'到'tbody' – Kejt

指定您希望得到答案的域。 – Nitheesh

要插入表中的东西：

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>

来源

2017-01-30 11:50:39 Ollaw

我想从php做到这一点。我该怎么做？ –

我已经编辑了php – Ollaw

试试这个。

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

来源

2017-01-30 11:52:54 Nitheesh

的答案感谢它很帮我.. –

不客气。添加CSS和javavsscript以清除添加后的字段也 – Nitheesh

@RaminduSamarawickrama如果这是所需的结果，请批准我的答案。 – Nitheesh

也许我想你可以通过JavaScript使用tbody元素（你缺少）的innerHTML财产和追加到它，比如

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>

希望能帮助到你！！！

来源

2017-01-30 12:10:15 Sree

如何将数据添加到HTML表中

回答

最终代码：

相关问题