Javascript for adding table row after user input

Question

I am trying to create a bill calculator that requires user input of their bill type and cost (i will get on to all the calculations after).

At the minute i have got a bootstrap table which is currently 3 rows.

My question is how do i get a new row for each time the user enters their input?

I have a "Bill type field" where the user would enter the type of bill they have.

Then i have the "Amount" for the user to enter how much it will cost.

Finally i have the "Have Paid?" button where the user would click to finish the bill.

Onclick of that button, i would like a new row to be inserted.

Any help would be very much appreciated.

This is my current 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>

Thanks!

usng Jquery or angularjs it will be easy.see this http://stackoverflow.com/questions/2160890/how-do-you-append-rows-to-a-table-using-jquery — Murali, Jan 25 '17 at 11:05
Possible duplicate of [How do you append rows to a table using jQuery?](http://stackoverflow.com/questions/2160890/how-do-you-append-rows-to-a-table-using-jquery) — סטנלי גרונן, Jan 25 '17 at 12:12

score 0 · Answer 1 · answered Jan 25 '17 at 11:14

Just to start, see following code:

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

score 0 · Answer 2 · answered Jan 25 '17 at 11:15

Let assume that your button has id="havePaidButton" and your table id="billTable" and the fields have ids billType, amount and isPaid, respectively.

Your code in the jQuery should look like this:

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

Javascript for adding table row after user input

2 Answers2