[wpseo_breadcrumb]

Get total as you type with added column (append) using jQuery

Solutons:


One issue if that the newly-added column id’s are missing the id number. If you look at the id, it only shows “price-“, when it should probably be “price-2-1”, since the original ones are “price-1”, and the original ones should probably be something like “price-1-1”.

Aside from that, the problem is you need to also add the event listeners to the newly-created items:

$('#add_supplier').click(function(){

  $('#supplier_table > thead > tr#first-header').append(
      '<th colspan="2">Supplier</th>'
  );

  $('#supplier_table > thead > tr#second-header').append(
      '<th>Price</th>'+
      '<th>Total</th>'
  );

  $('#supplier_table > tbody > tr').append(
      '<td><input type="text" class="form-control price" id="price-"></td>'+
      '<td><input type="text" class="form-control total" id="total-" readonly></td>'
  );



    $(".price").each(function () {
        $(this).keyup(function () {
            multInputs();
        });
    });

});

With the method below you can search the fields according to proximity, thus being able to make the calculations with the necessary parameters.

$(function(){

    $('#add_supplier').click(function(){

      $('#supplier_table > thead > tr#first-header').append(
          '<th colspan="2">Supplier</th>'
      );

      $('#supplier_table > thead > tr#second-header').append(
          '<th>Price</th>'+
          '<th>Total</th>'
      );

      $('#supplier_table > tbody > tr').append(
          '<td><input type="text" class="form-control price" id="price-"></td>'+
          '<td><input type="text" class="form-control total" id="total-" readonly></td>'
      );

    bindPrice();
    
    });
    
    bindPrice();
});

function bindPrice(){

    $('.price').off().on('keyup', function(){
      $total = $(this).parents().eq(0).next().find('.total');
      $qty = $(this).parents().eq(1).find('.qty');
      $total.val($(this).val() * $qty.val() )
    });
   }
<html lang="en">

  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <style type="text/css">
    #supplier_table thead th,
    td {
      text-align: center;
    }

  </style>

  <body>

    <div class="container">
      <h2>Bordered Table</h2>
      <p>The .table-bordered class adds borders to a table:</p>
      <button type="button" class="btn btn-default" id="add_supplier">Add Supplier</button>
      <table class="table table-bordered" id="supplier_table">
        <thead>
          <tr id="first-header">
            <th></th>
            <th></th>
            <th colspan="2">Supplier</th>
          </tr>
          <tr id="second-header">
            <th>Item</th>
            <th>Qty</th>
            <th>Price</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr class="tbody-tr">
            <td><input type="text" class="form-control" id="usr" value="Mouse" readonly=""></td>
            <td><input type="text" class="form-control qty" id="qrt-1" value="10" readonly=""></td>
            <td><input type="text" class="form-control price" id="price-1"></td>
            <td><input type="text" class="form-control total" id="total-1" readonly></td>
          </tr>
          <tr class="tbody-tr">
            <td><input type="text" class="form-control" id="usr" value="Keyboard" readonly=""></td>
            <td><input type="text" class="form-control qty" id="qty-3" value="20" readonly=""></td>
            <td><input type="text" class="form-control price" id="price-3"></td>
            <td><input type="text" class="form-control total" id="total-3" readonly></td>
          </tr>
          <tr class="tbody-tr">
            <td><input type="text" class="form-control" id="usr" value="Monitor" readonly=""></td>
            <td><input type="text" class="form-control qty" id="qty-5" value="30" readonly=""></td>
            <td><input type="text" class="form-control price" id="price-5"></td>
            <td><input type="text" class="form-control total" id="total-5" readonly></td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>

Related Solutions

What is D-Bus practically useful for?

dbus does exactly what you said: it allows two-way communication between applications. For your specific example you mentioned terminator. From terminator's man page, we see: --new-tab If this is specified and Terminator is already running, DBus will be used to...

How to check ‘mdadm’ RAIDs while running?

The point of RAID with redundancy is that it will keep going as long as it can, but obviously it will detect errors that put it into a degraded mode, such as a failing disk. You can show the current status of an array with mdadm --detail (abbreviated as mdadm...

What is a “toast notification”?

A Toast is a non modal, unobtrusive window element used to display brief, auto-expiring windows of information to a user. Android OS makes relatively heavy use of them. Here's an example of a Google Chrome toast notification on Mac OS X: A list of descriptions...

Which elliptic curve should I use?

You are misreading Bernstein and Lange's advice (admittedly, their presentation is a bit misleading, with the scary red "False" tags). What they mean is not that some curves are inherently unsafe, but that safe implementation of some curves is easier than for...

How can I find files that are bigger/smaller than x bytes?

Use: find . -type f -size +4096c to find files bigger than 4096 bytes. And : find . -type f -size -4096c to find files smaller than 4096 bytes. Notice the + and - difference after the size switch. The -size switch explained: -size n[cwbkMG] File uses n units of...

Relative imports in Python 3

Explanation From PEP 328 Relative imports use a module's __name__ attribute to determine that module's position in the package hierarchy. If the module's name does not contain any package information (e.g. it is set to '__main__') then relative imports are...

How to add a class to a given element?

If you're only targeting modern browsers: Use element.classList.add to add a class: element.classList.add("my-class"); And element.classList.remove to remove a class: element.classList.remove("my-class"); If you need to support Internet Explorer 9 or lower: Add...

less searches are always case-insensitive

I'm not sure how to enable this from the command line but when you're inside of less you can toggle the behavior you want by giving the -i command to less. toggling -i                searching for /blah and /BLAH               searching for /Blah       ...

Is using nested try-catch blocks an anti-pattern?

This is sometimes unavoidable, especially if your recovery code might throw an exception. Not pretty, but sometimes there are no alternatives. I don't think its an antipattern, just widely misused. Most nested try catch's are indeed avoidable and ugly as hell,...

Create a branch in Git from another branch

If you like the method in the link you've posted, have a look at Git Flow. It's a set of scripts he created for that workflow. But to answer your question: git checkout -b myFeature dev Creates the MyFeature branch off dev. Do your work and then git commit -am...

How can I set customise settings for htop?

htop has a setup screen, accessed via F2, that allows you to customize the top part of the display, including adding or removing a "Load average" field and setting it's style (text, bar, etc.). These seem to be auto saved in $HOME/.config/htop/htoprc, which...

Is there any way to manually bring up the keyboard?

As I see an alternative keyboard may solve your issue, and this seems to be an acceptable solution, and you even mention something you cannot find -- hereby I proudly present: Hacker's Keyboard Checking its Guide, there's in fact a section suggesting such a...

How to get rid of “No match found” when running “rm *”

This behaviour is controlled by several of Zsh's globbing options. By default, if a command line contains a globbing expression which doesn't match anything, Zsh will print the error message you're seeing, and not run the command at all. You can disable this in...

How to append date to backup filename

This isn't working because the command date returns a string with spaces in it. $ date Wed Oct 16 19:20:51 EDT 2013 If you truly want filenames like that you'll need to wrap that string in quotes. $ touch "foo.backup.$(date)" $ ll foo* -rw-rw-r-- 1 saml saml 0...

What does __all__ mean in Python?

Linked to, but not explicitly mentioned here, is exactly when __all__ is used. It is a list of strings defining what symbols in a module will be exported when from <module> import * is used on the module. For example, the following code in a foo.py...