Putting the value in the succeeding row

Question

Hi I'm having a problem on how to implement the on.change value on the succeeding row. It only applies on the first row.

$(document).ready(function() {
  var counter = 0;

  $("#addrow").on("click", function() {

    counter = $('#myTable tr').length - 2;

    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><select class="select-style" id="qc_code' + counter + '" name="qc_code' + counter + '"><option>----Select----</option><optgroup label="QC Code"> <option value="IHRM" >IHRM</option><option value="ICS" >ICS</option></optgroup></select></td>';
    cols += '<td><input type="text" name="name' + counter + '"/></td>';
    cols += '<td><input type="text" name="price' + counter + '"/></td>';
    cols += '<td><input type="text" name="cri_result' + counter + '"/></td>';
    cols += '<td><input type="text" name="hidden_val' + counter + '"/></td>';

    cols += '<td><input type="button" class="ibtnDel"  value="Delete"></td>';
    newRow.append(cols);
    //if (counter == 4) $('#addrow').attr('disabled', true).prop('value', "You've reached the limit");
    $("table.order-list").append(newRow);
    counter++;
  });
  console.log($("#qc_code1"))
  $("#qc_code1").change(function() {
    $("#hidden_val1").val($("#qc_code1").val()).change();
  });

  $("table.order-list").on("change", 'input[name^="price"]', function(event) {
    calculateRow($(this).closest("tr"));
    calculateGrandTotal();
  });



  $("table.order-list").on("click", ".ibtnDel", function(event) {
    $(this).closest("tr").remove();
    calculateGrandTotal();

    counter -= 1
    $('#addrow').attr('disabled', false).prop('value', "Add Row");
  });




});



function calculateRow(row) {
  var price = +row.find('input[name^="price"]').val();

}

function calculateGrandTotal() {
  var grandTotal = 0;
  $("table.order-list").find('input[name^="price"]').each(function() {
    grandTotal += +$(this).val();
  });
  $("#grandtotal").text(grandTotal.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="myTable" class="order-list">

  <input type="button" id="addrow" value="Add Row" />

  <thead>
    <tr>
      <td></td>
      <td>Name</td>
      <td>Price</td>
      <td>Status</td>
      <td>Hidden Valie</td>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>
        <select class="select-style" id="qc_code1" name="qc_code1">
                  <option>----Select----</option>
                  <optgroup label="QC Code">             
                     <option value="IHRM" >IHRM</option>
                     <option value="ICS" >ICS</option>
                  </optgroup>
               </select>
      </td>
      <td>
        <input type="text" name="name" />
      </td>
      <td>
        <input type="text" name="price1" />
      </td>
      <td>
        <input class="form-control text-center" type="text" id="cri_result1" name="cri_result1" placeholder="" readonly>
      </td>
      <td>
        <input class="form-control text-center" type="text" id="hidden_val1" name="hidden_val1" readonly>
      </td>
      <td>
        <a class="deleteRow"></a>

      </td>
    </tr>
  </tbody>
  <tfoot>
    <td colspan="">Grand Total: $<span id="grandtotal"></span>
  </tfoot>
</table>

http://jsfiddle.net/sqrrt/1335/

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Hikarunomemory, Apr 10 '18 at 05:55

score 0 · Accepted Answer · answered Apr 10 '18 at 06:11

0

I hope you are looking for this.

$("table.order-list").on("change", ".select-style", function() {
$(this).parent().parent().find('input[name^="hidden_val"]').val($(this).find('option:selected').val());
});

answered Apr 10 '18 at 06:11

Hrishikesh

602
3
13

How can I add if else statement in this situation? – warehows Apr 10 '18 at 07:33

Putting the value in the succeeding row

1 Answers1