用户输入后添加表格行的Javascript
[英]Javascript for adding table row after user input
问题描述
我正在尝试创建一个账单计算器，要求用户输入其账单类型和成本（我将在之后进行所有计算）。
在这一刻，我有一个引导表，当前是3行。
我的问题是，每当用户输入输入内容时，如何获得新行？
我有一个“账单类型字段”，用户可以在其中输入他们拥有的账单类型。
然后，我为用户提供了“金额”，以输入费用。
最后，我有“已付款？” 用户单击以完成帐单的按钮。
该按钮的onclick，我想插入一个新行。
任何帮助将不胜感激。
这是我当前的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>
谢谢！
2 个解决方案
解决方案1
0 2017-01-25 11:14:22
刚开始，请参见以下代码：
<!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>
解决方案2
0 2017-01-25 11:15:54
假设您的按钮具有id =“ havePaidButton”和表id =“ billTable”，并且字段分别具有ids BillType ， amount和isPaid 。
您在jQuery中的代码应如下所示：
$('#havePaidButton').off().on('click', function() {
('#billTable tr:last).after('<tr><td>' + ('#billType').val() + '</td><td>' + ('#amount').val() + '</td><td>' + $('#isPaid').val() + '</td>');
});
使用javascript动态在第一个表格行旁边添加表格行，而不是在第一个表格行之后添加
[英]Dynamically adding table row beside the first table row instead after the first table row using javascript
使用JavaScript检查输入后尝试突出显示表格行
[英]Trying to highlight a table row after input is checked using JavaScript
使用javascript动态地在表格的最后一行中添加一行
[英]Dynamically adding a row in the table onblur the last row in the table using javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.