1

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

4

4 回答 4

3

我已经分叉了你的小提琴并创建了一个工作版本

首先这里有一个问题,您忘记将事件侦听器添加到您将创建的第一行。

解决这个问题后,您只需将一个类添加到行总输入中,并使用调用者引用 ( $(this)) 在侦听器上过滤到它。

因此,您需要将代码更改为:

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);

更新


我建议你做的是:

  1. 添加一个实时事件侦听器,这样您就不需要为您创建的每一行添加事件侦听器,因为live会为您完成。[注意:live 在 1.9 版本已被弃用,或者你需要 on 方法,但它仍然有效]
  2. 使用更改事件而不是模糊。
  3. 将类添加到数量和价格字段,以便以更简单的方式过滤它们。

这将导致您的 javascript int 变成这样(您可以在此处查看小提琴):

    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();
});
于 2013-02-26T12:14:32.657 回答
1

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>')

}
于 2013-02-26T12:28:30.950 回答
0

修改您的代码:

$(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'));


    });

});

});

会做需要的。

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

于 2013-02-26T12:38:00.723 回答
-2
<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>');
于 2017-06-30T13:22:43.720 回答