Javascript für das Hinzufügen von Tabellenzeile nach Benutzereingabe

Ich versuche, einen Rechnerechner zu erstellen, der Benutzereingabe ihrer Rechnungsart und Kosten erfordert (ich werde zu allen Berechnungen nachher kommen).Javascript für das Hinzufügen von Tabellenzeile nach Benutzereingabe

In der Minute habe ich eine Bootstrap-Tabelle, die derzeit 3 Zeilen ist.

Meine Frage ist, wie kann ich für jedes Mal sie gibt den Benutzer Eingang eine neue Zeile zu bekommen?

Ich habe ein „Bill Typ-Feld“, wo der Benutzer die Art der Rechnung eingeben müßte sie.

Dann habe ich den "Betrag" für den Benutzer eingeben, wie viel es kostet.

Endlich habe ich das "Habe bezahlt?" Schaltfläche, wo der Benutzer klicken würde, um die Rechnung zu beenden.

Wenn ich auf diesen Knopf klicke, möchte ich eine neue Zeile einfügen.

Jede Hilfe würde sehr geschätzt werden.

Dies ist meine aktuelle HTML:

<div class="container"> 
    <h2>Bill Table</h2> 
    <p>Select the bill type to see how much it will cost</p>    
    <table class="table table-bordered table-content"> 
    <thead> 
     <tr> 
     <th class="table-content">Bill type</th> 
     <th class="table-content" ">Amount (£)</th> 
     <th class="table-content">Is paid?</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td><input type="text" id="billType1"></td> 
     <td><input type="number" id="amountType1"/></td> 
     <td id="btnContainer1"> 
      <button class="btn btn-sm btn-success yesBtn" id="yesPaid1">Yes</button> 
      <img class="greenTickImg" src="css/greentick.png"> 
     </td> 
     </tr> 
     <tr> 
     <td>Mary</td> 
     <td><input type="number" id="Food"/></td> 
     <td> 
      <button class="btn btn-sm btn-success yesBtn">Yes</button> 
      <img class="greenTickImg" src="css/greentick.png"> 
     </td> 
     </tr> 
     <tr> 
     <td>July</td> 
     <td><input type="number" id="Drink"/></td> 
     <td> 
     <button class="btn btn-sm btn-success yesBtn">Yes</button> 
     <img class="greenTickImg" src="css/greentick.png"> 
     </td> 
     </tr> 
    </tbody> 
    </table>

Dank!

Quelle

2017-01-25 markcassidy

usng JQuery oder AngularJS wird es diese easy.see werden http://stackoverflow.com/questions/2160890/how-do-you-append -rows-to-a-table-using-jquery – Murali

Mögliches Duplikat von [Wie hängt man Zeilen mit jQuery an eine Tabelle an?] (http://stackoverflow.com/questions/2160890/how-do-you-append- Zeilen-zu-Tabelle-Verwendung-jQuery) –

einfach zu starten, finden Sie folgenden Code ein:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
    <h2>Bill Table</h2> 
 
    <p>Select the bill type to see how much it will cost</p>    
 
    <table class="table table-bordered table-content"> 
 
    <thead> 
 
     <tr> 
 
     <th class="table-content">Bill type</th> 
 
     <th class="table-content">Amount (£)</th> 
 
     <th class="table-content">Is paid?</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody id="myGrid"> 
 
     <tr> 
 
     <td><input type="text" id="billType1"></td> 
 
     <td><input type="number" id="amountType1"/></td> 
 
     <td id="btnContainer1"> 
 
      <button class="btn btn-sm btn-success yesBtn" id="yesPaid1">Yes</button> 
 
      <img class="greenTickImg" src="css/greentick.png"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Mary</td> 
 
     <td><input type="number" id="Food"/></td> 
 
     <td> 
 
      <button class="btn btn-sm btn-success yesBtn">Yes</button> 
 
      <img class="greenTickImg" src="css/greentick.png"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>July</td> 
 
     <td><input type="number" id="Drink"/></td> 
 
     <td> 
 
     <button class="btn btn-sm btn-success yesBtn">Yes</button> 
 
     <img class="greenTickImg" src="css/greentick.png"> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <script> 
 
    $(".yesBtn").click(function(){ 
 
     var name = $("#billType1").val(); 
 
     var amount = $("#amountType1").val(); 
 
     $("#myGrid").append("<tr><td>" + name + "</td><td>" + amount + "</td></tr>") 
 
     $("#billType1").val(""); 
 
     $("#amountType1").val(""); 
 
    }); 
 
    </script> 
 
</body> 
 
</html>

Quelle

2017-01-25 11:14:22 Alessandro

Nehmen wir an, dass Ihre Taste-ID hat = "havePaidButton" und Tisch id = "billTable" und die Felder haben ids billType, Menge und isPaid, respectively.

Ihr Code in der jQuery sollte wie folgt aussehen:

$('#havePaidButton').off().on('click', function() { 
    ('#billTable tr:last).after('<tr><td>' + ('#billType').val() + '</td><td>' + ('#amount').val() + '</td><td>' + $('#isPaid').val() + '</td>'); 
});

Quelle

2017-01-25 11:15:54

Javascript für das Hinzufügen von Tabellenzeile nach Benutzereingabe

Antwort

Verwandte Themen