Question

我正在尝试创建一个账单计算器，要求用户输入他们的账单类型和成本（之后我将继续进行所有计算）。

当我有一个目前3行的引导表时。

我的问题是每次用户输入输入时如何获得新行？

我有一个＆＃34;比尔类型字段＆＃34;用户可以输入他们拥有的账单类型。

然后我有＆＃34;金额＆＃34;用户输入的费用。

最后我得到了＃34;付了钱？＆＃34;用户点击完成账单的按钮。

点击该按钮，我希望插入一个新行。

非常感谢任何帮助。

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

谢谢！

Answer 1

刚开始，请参阅以下代码：

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

Answer 2

假设您的按钮有id =“havePaidButton”且您的表ID =“billTable”且字段包含ID billType ，金额和 isPaid < / em>，分别。

jQuery中的代码应如下所示：

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

用户输入后添加表格行的Javascript

2 个答案: