Dynamically calculate price onBlur() jquery from dynamic table

Question

I have a table in which rows are added dynamically when needed by clicking "add item". When person adds a row and fill "Unit Price" in it and leaves the input area.The "Line Total" input box should fill automatically.As I know to use onBlur() but due to dynamically row adding how to update jquery code for each row.

I have following jquery code

<script type="text/javascript">
var i=1;
function AddRow()
{ 
    i++;
    $('#myTable').append('<tr><td><input type="text" name="sno'+i+'" value="'+i+'"></td><td><input type="text" name="description'+i+'"></td><td><input type="text" id="quantity'+i+'" name="quantity'+i+'"></td><td><input type="text" id="price'+i+'" name="price'+i+'"></td><td><input type="text" name="linetotal'+i+'"></td></tr>')
    $('#price'+i+'').blur(function() {
    alert('Handler for .blur('+i+') called.');
    });
}
</script>

The example is JSFiddle

Please help Thanks in advance

Answer 1

<div id=ots></div>

$("#ots").append(
        '<div class="row main" id="maindivid'+i+'" style="border-bottom:1px solid black;">' +
'<div class="col-md-2">' +
    '<div class="row">' +
        '<div class="col-md-3">' +
        '<span class="hide schedule" id="sheduleid' + i + '">' + k.NewOTScheduleID + '</span>' +
            '<button id="btnall" name="btnall" style="background-color:red; color:yellow; font-size:10px; margin-top: 20px;">Apply</button>' +
        '</div>' +
        '<div class="col-md-9">' +
            '<select id="tblschedule" class="backcolor" style="color:#428bca;width:146px;height:50px;border:0px; font-size:11px;border-color:black;">' +
                '<option style="display:none"></option>' +
            '</select>' +
        '</div>' +
    '</div>' +
'</div>' +
'<div class="col-md-2" style="background-color:#fafaa0; height:52px">' +
    '<div class="row" style="padding-top:5px;">' +
        '<div class="table-responsive">' +
            '<table class="table table-bordered Loc_table class1" style="table-layout: fixed;" id="tblnew1">' +
                '<tr>' +
                    '<td style="text-align:center; border-color:transparent; border-bottom:1px;">1X</td>' +
                    '<td style="text-align:center; border-color:transparent; border-bottom:1px; border-right:1px;">1.5X</td>' +
                    '<td id="regular' + i + 'h1" contenteditable="true" style="background-color:white;">' + k.RegularDayH1 + '</td>' +
                    '<td id="regular' + i + 'h2" contenteditable="true" style="background-color:white;">' + k.RegularDayH2 + '</td>' +
                    '<td id="regular' + i + 'h3" contenteditable="true" style="background-color:white;">' + k.RegularDayH3 + '</td>' +
                    '<td id="regular' + i + 'h4" contenteditable="true" style="background-color:white;">' + k.RegularDayH4 + '</td>' +
                '</tr>' +
                '<tr>' +
                    '<td id="regular' + i + '1x" contenteditable="true" style="background-color:#eeeeee; color:blue;">' + k.RegularDay1x + '</td>' +
                    '<td id="regular' + i + '1.5x" contenteditable="true" style="background-color:#eeeeee; color:blue;">' + k.RegularDay1_5x + '</td>' +
                    '<td id="regular' + i + 'c1" contenteditable="true" style="background-color:white; color:blue;">' + k.RegularDayF1 + '</td>' +
                    '<td id="regular' + i + 'c2" contenteditable="true" style="background-color:white;">' + k.RegularDayF2 + '</td>' +
                    '<td id="regular' + i + 'c3" contenteditable="true" style="background-color:white;">' + k.RegularDayF3 + '</td>' +
                    '<td id="regular' + i + 'c4" contenteditable="true" style="background-color:white;">' + k.RegularDayF4 + '</td>' +
                '</tr>' +
           '</table>' +
        '</div>' +
    '</div>' +
'</div>' +
'<div class="col-md-2" style="background-color:#ccffcc; height:52px;">' +
   '<div class="table-responsive" style="padding-top:5px; margin-left: -7px; margin-right: -7px;">' +
        '<table class="table table-bordered Loc_table class2" style="table-layout: fixed;" id="tblnew2">' +
            '<tr>' +
                '<td style="text-align:center; border-color:transparent; border-bottom:1px;">1X</td>' +
               '<td style="text-align:center; border-color:transparent; border-bottom:1px;">1.5X</td>' +
                '<td id="6thday' + i + 'h1" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
                '<td id="6thday' + i + 'h2" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
                '<td id="6thday' + i + 'h3" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
                '<td id="6thday' + i + 'h4" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
            '</tr>' +
            '<tr>' +
                '<td id="6thday' + i + '1x" contenteditable="true" style="background-color:#eeeeee; color:blue;">' + k.SixthDay1x + '</td>' +
                '<td id="6thday' + i + '1.5x" contenteditable="true" style="background-color:#eeeeee; color:blue;">' + k.SixthDay1_5x + '</td>' +
                '<td id="6thday' + i + 'c1" contenteditable="true" style="background-color:white;">' + k.SixthDayF1 + '</td>' +
                '<td id="6thday' + i + 'c2" contenteditable="true" style="background-color:white;">' + k.SixthDayF2 + '</td>' +
                '<td id="6thday' + i + 'c3" contenteditable="true" style="background-color:white; color:blue;">' + k.SixthDayF3 + '</td>' +
                '<td id="6thday' + i + 'c4" contenteditable="true" style="background-color:white;">' + k.SixthDayF4 + '</td>' +
            '</tr>' +
        '</table>' +
    '</div>' +
'</div>' +
'<div class="col-md-2" style="background-color:#ccffff; height:52px;">' +
    '<div class="table-responsive" style="padding-top:5px; margin-left: -7px; margin-right: -7px;">' +
        '<table class="table table-bordered Loc_table class3" style="table-layout: fixed;" id="tblnew3">' +
            '<tr>' +
                '<td style="text-align:center; border-color:transparent; border-bottom:1px;">1X</td>' +
                '<td style="text-align:center; border-color:transparent; border-bottom:1px;">1.5X</td>' +
                '<td id="7thday' + i + 'h1" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
                '<td id="7thday' + i + 'h2" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
                '<td id="7thday' + i + 'h3" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
                '<td id="7thday' + i + 'h4" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
            '</tr>' +
            '<tr>' +
                '<td id="7thday' + i + '1x" contenteditable="true" style="background-color:#eeeeee;">' + k.SeventhDay1x + '</td>' +
                '<td id="7thday' + i + '1.5x" contenteditable="true" style="background-color:#eeeeee;">' + k.SeventhDay1_5x + '</td>' +
                '<td id="7thday' + i + 'c1" contenteditable="true" style="background-color:#eeeeee; color:blue;">' + k.SeventhDayF1 + '</td>' +
                '<td id="7thday' + i + 'c2" contenteditable="true" style="background-color:white;">' + k.SeventhDayF2 + '</td>' +
                '<td id="7thday' + i + 'c3" contenteditable="true" style="background-color:white;">' + k.SeventhDayF3 + '</td>' +
                '<td id="7thday' + i + 'c4" contenteditable="true" style="background-color:white; color:blue;">' + k.SeventhDayF4 + '</td>' +
            '</tr>' +
        '</table>' +
    '</div>' +
'</div>' +
'<div class="col-md-3" style="background-color:#ffccff;height:52px;">' +
    '<div class="row" style="padding-top:5px;">' +
        '<div class="col-md-9">' +
            '<div class="row">' +
                '<div class="table-responsive">' +
                    '<table class="table table-bordered Loc_table class4" style="table-layout: fixed;" id="tblnew4">' +
                        '<tr>' +
                            '<td style="text-align:center; border-color:transparent; border-bottom:1px;">1X</td>' +
                            '<td style="text-align:center; border-color:transparent; border-bottom:1px;">1.5X</td>' +
                            '<td id="alternate' + i + 'h1" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
                            '<td id="alternate' + i + 'h2" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
                            '<td id="alternate' + i + 'h3" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
                            '<td id="alternate' + i + 'h4" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
                            '<td style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
                        '</tr>' +
                        '<tr>' +
                            '<td id="alternate' + i + '1x" contenteditable="true" style="background-color:#eeeeee; color:blue;">' + k.Alternate1x + '</td>' +
                            '<td id="alternate' + i + '1.5x" contenteditable="true" style="background-color:#eeeeee; color:blue;">' + k.Alternate1_5x + '</td>' +
                            '<td id="alternate' + i + 'c1" contenteditable="true" style="background-color:white; color:blue;">' + k.AlternateF1 + '</td>' +
                            '<td id="alternate' + i + 'c2" contenteditable="true" style="background-color:white;">' + k.AlternateF2 + '</td>' +
                            '<td id="alternate' + i + 'c3" contenteditable="true" style="background-color:white;">' + k.AlternateF3 + '</td>' +
                            '<td id="alternate' + i + 'c4" contenteditable="true" style="background-color:white;">' + k.AlternateF4 + '</td>' +
                            '<td style="border-color:transparent; border-left:1px"><input type="checkbox"></td>' +
                        '</tr>' +
                    '</table>' +
                '</div>' +
            '</div>' +
        '</div>' +
        '<div class="col-md-3">' +
            '<div class="row">' +
                @*<input type="text" class="form-control tex_box" style="background-color:#eeeeee; font-size:10px; margin-top:-5px;" value="8 Distant">*@
                @* <input type="text" class="form-control" style="height:30px; margin-top:2px; background-color:#eeeeee; font-size:10px;" value="L.A. Basic Crafts, IATSE, & Teamsters">*@
                '<select id="restperiodone' + i + '" class="form-control tex_box" style="background-color:#eeeeee; font-size:10px; margin-top:-5px;">' +
                    '<option></option>' +
                '</select>' +
                '<select id="restperiodone' + i + '" class="form-control" style="height:30px; margin-top:2px; background-color:#eeeeee; font-size:10px;">' +
                    '<option></option>' +
                '</select>' +
            '</div>' +
        '</div>' +
    '</div>' +
'</div>' +
'<div class="col-md-1" style="background-color:#ffccff; height: 50px;">' +
    '<button id="copytofavorite" style="font-size:11px; height:50px; color:yellow; background-color:#c0c0c0; margin-top:0px;">Copy To Favorite Overtime Schedules</button>' +
'</div>' +
    '</div>');

Answer 2

modification to your code:

$(document).ready(function(){

var i = 1;

$("#btnAdd").click(function(){

    i++;

    $('#myTable').append('<tr><td><input type="text" name="sno'+i+'" value="'+i+'"></td><td><input type="text" name="description'+i+'"></td><td><input type="text" id="quantity'+i+'" name="quantity'+i+'"></td><td><input type="text" id="price'+i+'" name="price'+i+'" id="price'+i+'"></td><td><input type="text"  id="linetotal'+i+'" name="linetotal'+i+'"></td></tr>')

    $('#price'+i+'').blur(function(){

            //alert($("#quantity"+i).attr('value') * $("#price"+i).attr('value'));

            $("#linetotal"+i).val($("#quantity"+i).attr('value') * $("#price"+i).attr('value'));


    });

});

});

Will do the needful.

$("#linetotal"+i).val($("#quantity"+i).attr('value') * $("#price"+i).attr('value'));

Answer 3

I've forked your fiddle and created a working version.

To start there is a problem here, you forgot to add the event listeners to the first row, that you would create.

After solving that you just needed to add a class to the line total input and filter your way into it on the listener using the caller reference ($(this)).

So you need to change your code to:

HTML

<body>
  <center>
    <div class="header">
      <p class="left">
        VAT NO. 1234567
      </p>
      <p class="center">
        ABC Company
        <br>
        <span>
          Address Here
        </span>
      </p>
      <p class="right">
        TEL:123563636
        <br/>
        132345675643
        <br/>
      </p>
    </div>
    <br/>
    <hr/>
    <div class="content">
      <table id="myTable">
        <tr>
          <td width="20px">
            S.No.
          </td>
          <td width="400px">
            Description
          </td>
          <td width="50px">
            Quantity
          </td>
          <td>
            Unit Price
          </td>
          <td>
            Line Total
          </td>
        </tr>
        <table>
          <div class="button">
            <input type="button" id="btnAdd" onclick="AddRow()" value="Add Item"/>
          </div>
          <div>
          </center>
        </body>

JS

    var i=0;
function AddRow()
{ 
    i++;
    $('#myTable').append('<tr><td><input type="text" name="sno'+i+'" value="'+i+'"></td><td><input type="text" name="description'+i+'"></td><td><input type="text" id="quantity'+i+'" name="quantity'+i+'"></td><td><input type="text" id="price'+i+'" name="price'+i+'"></td><td><input type="text" name="linetotal'+i+'" class="linetotal"></td></tr>')
    $('#price'+i+'').blur(function() {
    alert('Handler for .blur('+i+') called.');
        $(this).parents("tr").find(".linetotal").val("Value Here");
    });
}
$(document).ready(AddRow);

---

Updated

---

What I recommend you to do is to:

1. Add a live event listener, so that you don't need to add event listeners for each row you create, since live will do it for you. [Note: live was deprecated on version 1.9, in alternative you need to can the on method, but it still works]
2. Use the change event instead of blur.
3. Add classes to the quantity and price fields in order to filter them in an easier way.

This would lead to turning your javascript int something like this (you can check the fiddle here):

    var i=0;
function AddRow()
{ 
    i++;
    $('#myTable').append('<tr><td><input type="text" name="sno'+i+'" value="'+i+'"></td><td><input type="text" name="description'+i+'"></td><td><input type="text" id="quantity'+i+'" name="quantity'+i+'" class="quantity"></td><td><input type="text" id="price'+i+'" name="price'+i+'" class="price"></td><td><input type="text" name="linetotal'+i+'" class="linetotal"></td></tr>');
}
$(document).ready(function(){
    $(".price, .quantity").live("change", function() {
        var item_quantity = parseInt($(this).parents("tr").find(".quantity").val());
        var unit_price = parseInt($(this).parents("tr").find(".price").val());
        var total_value = unit_price * item_quantity;
        console.info(item_quantity, unit_price, total_value);
        if(!isNaN(total_value))
            $(this).parents("tr").find(".linetotal").val(total_value);
    });
    AddRow();
});

Answer 4

Working Demo

I have just little update your code. And use the ID attribute for your 'linetotal' input not name.

function calculate(index)
{
    //alert(index);
    var price = $('#price'+index+'').val();
    var qty = $('#quantity'+index+'').val();
    var total = price * qty;
    $('#linetotal'+index+'').val(total);
    alert($('#linetotal'+index+'').val());
}

your AddRow function...

var i=1;
function AddRow()
{ 
    i++;
    $('#myTable').append('<tr><td><input type="text" name="sno'+i+'" value="'+i+'"></td><td><input type="text" name="description'+i+'"></td><td><input type="text" id="quantity'+i+'" name="quantity'+i+'"></td><td><input type="text" id="price'+i+'" name="price'+i+'" onblur="calculate('+i+')"></td><td><input type="text" id="linetotal'+i+'"></td></tr>')

}