-3

Ich möchte die Einfügefunktion schreiben, damit die in das Textfeld eingegebenen Daten in eine neue Tabellenzeile übernommen werden. Innerhalb der insertdata() sollten die Daten an eine neue Zeile der Tabelle gesendet werden.So fügen Sie Daten zu einer Tabelle in HTML hinzu

hier ist mein Code:

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

Quelle

2017-01-30 Ramindu Samarawickrama

unter '' Elemente 'hinzufügen ' Und dann in Ihrer Funktion Elemente '' erstellen, erstellen Element '' , hängt 'td' zu', tr' und am Ende anfügen 'tr' zu' tbody' – Kejt

Geben Sie die Domäne an, in der Sie die Antwort erwarten. – Nitheesh

Um etwas in die Tabelle einfügen:

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"; 
}

In Ihrem Fall statt "Hier sind wir", rufen Sie den Inhalt der das Eingabefeld und fügen Sie innerhalb der Zellen hinzu.

Vergessen Sie nicht, tbody in Ihrer Tabelle in HTML hinzuzufügen.

EDIT:

mit PHP, wenn Ihre Daten gespeichert sind, beispielsweise in einem Array, und Sie ein Array aller Menschen haben, müssen Sie nur diese einzufügen:

<tbody> 
<?php 
    foreach($list_of_person as $ person){ 
?> 
    <tr> 
     <td><?=$person["name"]?></td> 
     <td><?=$person["surname"]?></td> 
     <td><?=$person["address"]?></td> 
    </tr> 
<?php } ?> 
</tbody>

Quelle

2017-01-30 11:50:39 Ollaw

Ich möchte es von PHP machen. Wie kann ich es tun? –

Ich habe die Antwort für PHP – Ollaw

Versuchen Sie dies.

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

Quelle

2017-01-30 11:52:54 Nitheesh

bearbeitet Vielen Dank es hat mir wirklich geholfen .. –

Gern geschehen. Fügen Sie CSS und javavsscript hinzu, um die Felder nach dem Hinzufügen auch zu löschen. – Nitheesh

@RaminduSamarawickrama Wenn dies das erforderliche Ergebnis ist, bestätigen Sie bitte meine Antwort. – Nitheesh

Vielleicht denke ich Ihnen die innerHTML Eigenschaft des tbody Element verwenden können (Sie fehlt) durch JavaScript und anhängen, um es, wie

document.getElementById("ID of the tbody element").innerHTML += "<tr><td>" + CustomerName + "</td><td>" + CustomerAddress + "</td><td>" + CustomerTelephone + "</td></tr>";

Well Ich habe einen einfachen Vorschlag, um die Dinge einfacher zu machen – IDs für die Eingabefelder verwenden, so dass die Werte leichter zu nehmen. Wie ...

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

Und für Ihre JavaScript-Funktion, können Sie wie folgt verwenden:

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>"; 
}

Schlusscode:

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

Ich hoffe es hilft!!!

Quelle

2017-01-30 12:10:15 Sree

So fügen Sie Daten zu einer Tabelle in HTML hinzu

Antwort

Schlusscode:

Verwandte Themen