用於在用戶輸入後添加表格行的Javascript

我想創建一個帳單計算器，它需要用戶輸入他們的帳單類型和成本（我將繼續進行所有計算）。用於在用戶輸入後添加表格行的Javascript

在那一刻我有一個引導表，這是目前3行。

我的問題是我怎麼得到一個新的行，每次用戶輸入他們的輸入？

我有一個「賬單類型字段」，用戶可以在其中輸入賬單類型。

然後我有「金額」爲用戶輸入多少費用。

最後我有「已付費？」按鈕，用戶點擊完成賬單。

點擊那個按鈕，我想要插入一個新行。

任何幫助將非常感激。

這是我目前的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>

謝謝！

來源

2017-01-25 markcassidy

USNG jQuery的或angularjs將easy.see這http://stackoverflow.com/questions/2160890/how-do-you-append -arrow-to-a-table-using-jquery – Murali

[你如何使用jQuery將行附加到表中]（http://stackoverflow.com/questions/2160890/how-do-you-append-行到一個表 - 使用-jquery的） –

剛開始，看到下面的代碼：

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

來源

2017-01-25 11:14:22 Alessandro

我們假設你的按鈕具有ID = 「havePaidButton」和你的表ID = 「billTable」和領域有ID billType,金額和分別爲。

你在jQuery代碼應該是這樣的：

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

來源

2017-01-25 11:15:54

用於在用戶輸入後添加表格行的Javascript

回答

相關問題