How to make table dynamically multiply column 1 and column 2 and answer in column 3 in Laravel

what I'm making is a Laravel project. That web page I need to add a table when user insert number in column 1 and column 2 the table should multiply the numbers and should display in column 3.

Controller code

 public function makeTable(Request $request){        

    $items = $request->get('values');

    $output = '<table class="table table-sm">

    <thead>

      <tr>

        <th scope="col">Item ID</th>

        <th scope="col">Food Item</th>

        <th scope="col">Unit Price</th>

        <th scope="col">Amount</th>

        <th scope="col">Price</th>

      </tr>

    </thead>

    <tbody>';



    foreach ($items as $item){            

        $itemId = FoodItem::where('itemName','like','%'.$item.'%')->value('id');          

        $output .= '<tr>

        <th scope="row">'.$itemId.'</th>

        <td>'.$item.'</td>

        <td><input type="text" class="form-control"></td>

        <td><input type="text" class="form-control"></td>

        <td></td>

      </tr>';

    }

    $output .= '</tbody>

    </table>';  



    echo $output;

}

What I want is when user input unit price and amount the price should be display automatically by multiplying unit price and amount.
The user should be able to do this row by row.

edited Jan 1 at 13:07

Brian Tompsett - 汤莱恩

4,2331338101

asked Jan 1 at 12:04

Gayath_chandi

144

add a comment |

what I'm making is a Laravel project. That web page I need to add a table when user insert number in column 1 and column 2 the table should multiply the numbers and should display in column 3.

Controller code

 public function makeTable(Request $request){        

    $items = $request->get('values');

    $output = '<table class="table table-sm">

    <thead>

      <tr>

        <th scope="col">Item ID</th>

        <th scope="col">Food Item</th>

        <th scope="col">Unit Price</th>

        <th scope="col">Amount</th>

        <th scope="col">Price</th>

      </tr>

    </thead>

    <tbody>';



    foreach ($items as $item){            

        $itemId = FoodItem::where('itemName','like','%'.$item.'%')->value('id');          

        $output .= '<tr>

        <th scope="row">'.$itemId.'</th>

        <td>'.$item.'</td>

        <td><input type="text" class="form-control"></td>

        <td><input type="text" class="form-control"></td>

        <td></td>

      </tr>';

    }

    $output .= '</tbody>

    </table>';  



    echo $output;

}

What I want is when user input unit price and amount the price should be display automatically by multiplying unit price and amount.
The user should be able to do this row by row.

edited Jan 1 at 13:07

Brian Tompsett - 汤莱恩

4,2331338101

asked Jan 1 at 12:04

Gayath_chandi

144

add a comment |

what I'm making is a Laravel project. That web page I need to add a table when user insert number in column 1 and column 2 the table should multiply the numbers and should display in column 3.

Controller code

 public function makeTable(Request $request){        

    $items = $request->get('values');

    $output = '<table class="table table-sm">

    <thead>

      <tr>

        <th scope="col">Item ID</th>

        <th scope="col">Food Item</th>

        <th scope="col">Unit Price</th>

        <th scope="col">Amount</th>

        <th scope="col">Price</th>

      </tr>

    </thead>

    <tbody>';



    foreach ($items as $item){            

        $itemId = FoodItem::where('itemName','like','%'.$item.'%')->value('id');          

        $output .= '<tr>

        <th scope="row">'.$itemId.'</th>

        <td>'.$item.'</td>

        <td><input type="text" class="form-control"></td>

        <td><input type="text" class="form-control"></td>

        <td></td>

      </tr>';

    }

    $output .= '</tbody>

    </table>';  



    echo $output;

}

What I want is when user input unit price and amount the price should be display automatically by multiplying unit price and amount.
The user should be able to do this row by row.

edited Jan 1 at 13:07

Brian Tompsett - 汤莱恩

4,2331338101

asked Jan 1 at 12:04

Gayath_chandi

144

what I'm making is a Laravel project. That web page I need to add a table when user insert number in column 1 and column 2 the table should multiply the numbers and should display in column 3.

Controller code

 public function makeTable(Request $request){        

    $items = $request->get('values');

    $output = '<table class="table table-sm">

    <thead>

      <tr>

        <th scope="col">Item ID</th>

        <th scope="col">Food Item</th>

        <th scope="col">Unit Price</th>

        <th scope="col">Amount</th>

        <th scope="col">Price</th>

      </tr>

    </thead>

    <tbody>';



    foreach ($items as $item){            

        $itemId = FoodItem::where('itemName','like','%'.$item.'%')->value('id');          

        $output .= '<tr>

        <th scope="row">'.$itemId.'</th>

        <td>'.$item.'</td>

        <td><input type="text" class="form-control"></td>

        <td><input type="text" class="form-control"></td>

        <td></td>

      </tr>';

    }

    $output .= '</tbody>

    </table>';  



    echo $output;

}

What I want is when user input unit price and amount the price should be display automatically by multiplying unit price and amount.
The user should be able to do this row by row.

javascript jquery laravel html-table

edited Jan 1 at 13:07

Brian Tompsett - 汤莱恩

4,2331338101

asked Jan 1 at 12:04

Gayath_chandi

144

edited Jan 1 at 13:07

Brian Tompsett - 汤莱恩

4,2331338101

asked Jan 1 at 12:04

Gayath_chandi

144

edited Jan 1 at 13:07

Brian Tompsett - 汤莱恩

4,2331338101

edited Jan 1 at 13:07

Brian Tompsett - 汤莱恩

4,2331338101

edited Jan 1 at 13:07

Brian Tompsett - 汤莱恩

4,2331338101

asked Jan 1 at 12:04

Gayath_chandi

144

asked Jan 1 at 12:04

Gayath_chandi

144

asked Jan 1 at 12:04

Gayath_chandi

144

add a comment |

2 Answers
2

active

oldest

votes

The code below does what you would like.

I've add some classes so that it is easier to determine what each input and td is for.

I've also added the event triggers in a manner that means dynamically added rows will continue to work (click on the add button to see this in action).

Update changed the cost per row to an input as requested and added a sum function for the value of all rows.

Demo

// Add event trigger to inputs with class auto-calc

$(document).on("keyup change paste", "td > input.auto-calc", function() {



  // Determine parent row

  row = $(this).closest("tr");



  // Get first and second input values

  first = row.find("td input.unit-price").val();

  second = row.find("td input.amount").val();



  // Print input values to output cell

  row.find(".total-cost").val(first * second);





  // Update total invoice value

  var sum = 0;

  // Cycle through each input with class total-cost

  $("input.total-cost").each(function() {

    // Add value to sum

    sum += +$(this).val();

  });



  // Assign sum to text of #total-invoice

  // Using the id here as there is only one of these

  $("#total-invoice").text(sum);





});





// Add dynamic row to demonstrate works in this case

$(document).on("click", "#add", function() {



  $("tbody").append('<tr><th scope="row">ITEM003</th><td>KNIFE</td><td><input type="text" class="auto-calc unit-price form-control"></td><td><input type="text" class="auto-calc amount form-control"></td><td><input type="text" class="total-cost amount form-control"></td></tr>');

  $(this).remove();



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<table class="table table-sm">

  <thead>

    <tr>

      <th scope="col">Item ID</th>

      <th scope="col">Food Item</th>

      <th scope="col">Unit Price</th>

      <th scope="col">Amount</th>

      <th scope="col">Price</th>

    </tr>

  </thead>

  <tbody>



    <tr>

      <th scope="row">ITEM001</th>

      <td>PLATE</td>

      <td><input type="text" class="auto-calc unit-price form-control"></td>

      <td><input type="text" class="auto-calc amount form-control"></td>

      <td><input type="text" class="total-cost form-control"></td>

    </tr>

    

    

    <tr>

      <th scope="row">ITEM002</th>

      <td>SPOON</td>

      <td><input type="text" class="auto-calc unit-price form-control"></td>

      <td><input type="text" class="auto-calc amount form-control"></td>

      <td><input type="text" class="total-cost form-control"></td>

    </tr>

    

    

  </tbody>

</table>





<p>Total invoice amount: <span id="total-invoice">0</span>.

  <p>



    <button id="add">Add row</button>

edited Jan 1 at 13:52

answered Jan 1 at 12:14

Oliver Trampleasure

1,6861519

This works! Thank You very much!

– Gayath_chandi
Jan 1 at 13:16

Glad it worked. Good luck with the rest of your project

– Oliver Trampleasure
Jan 1 at 13:18

I want to make last column also a input field. How do I do that. <td> <input class="total-cost"></td> like this. And then I have to change // Print input values to output cell row.find("td input.total-cost").text(first * second); But that doesn't work

– Gayath_chandi
Jan 1 at 13:29

Inputs don't accept .text(), so you need to assign it using .val()

– Oliver Trampleasure
Jan 1 at 13:34

1

It works! sorry I can not upvote since my reputation is below 15 :(

– Gayath_chandi
Jan 1 at 14:00

|
show 4 more comments

I found the answer but this only works if there is only one row. But in my case it have many rows.

<input type="text" name="input1" id="input1" value="5">

<input type="text" name="input2" id="input2" value=""> <a href="javascript: void(0)" 

onClick="calc()">Calculate</a>



<input type="text" name="output" id="output" value="">

And in javascript

$("#input2,#input1").keyup(function () {



$('#output').val($('#input1').val() * $('#input2').val());



});

This will simply multiply columns.

answered Jan 1 at 13:08

Gayath_chandi

144

The issue you here is using the id parameter, it will just find the first example of each. There's no context for the code to recognise that there are multiple rows. This would be a very good way of doing it, if the calculation and inputs only occured once on a page.

– Oliver Trampleasure
Jan 1 at 13:17

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995282%2fhow-to-make-table-dynamically-multiply-column-1-and-column-2-and-answer-in-colum%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

The code below does what you would like.

I've add some classes so that it is easier to determine what each input and td is for.

I've also added the event triggers in a manner that means dynamically added rows will continue to work (click on the add button to see this in action).

Update changed the cost per row to an input as requested and added a sum function for the value of all rows.

Demo

// Add event trigger to inputs with class auto-calc

$(document).on("keyup change paste", "td > input.auto-calc", function() {



  // Determine parent row

  row = $(this).closest("tr");



  // Get first and second input values

  first = row.find("td input.unit-price").val();

  second = row.find("td input.amount").val();



  // Print input values to output cell

  row.find(".total-cost").val(first * second);





  // Update total invoice value

  var sum = 0;

  // Cycle through each input with class total-cost

  $("input.total-cost").each(function() {

    // Add value to sum

    sum += +$(this).val();

  });



  // Assign sum to text of #total-invoice

  // Using the id here as there is only one of these

  $("#total-invoice").text(sum);





});





// Add dynamic row to demonstrate works in this case

$(document).on("click", "#add", function() {



  $("tbody").append('<tr><th scope="row">ITEM003</th><td>KNIFE</td><td><input type="text" class="auto-calc unit-price form-control"></td><td><input type="text" class="auto-calc amount form-control"></td><td><input type="text" class="total-cost amount form-control"></td></tr>');

  $(this).remove();



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<table class="table table-sm">

  <thead>

    <tr>

      <th scope="col">Item ID</th>

      <th scope="col">Food Item</th>

      <th scope="col">Unit Price</th>

      <th scope="col">Amount</th>

      <th scope="col">Price</th>

    </tr>

  </thead>

  <tbody>



    <tr>

      <th scope="row">ITEM001</th>

      <td>PLATE</td>

      <td><input type="text" class="auto-calc unit-price form-control"></td>

      <td><input type="text" class="auto-calc amount form-control"></td>

      <td><input type="text" class="total-cost form-control"></td>

    </tr>

    

    

    <tr>

      <th scope="row">ITEM002</th>

      <td>SPOON</td>

      <td><input type="text" class="auto-calc unit-price form-control"></td>

      <td><input type="text" class="auto-calc amount form-control"></td>

      <td><input type="text" class="total-cost form-control"></td>

    </tr>

    

    

  </tbody>

</table>





<p>Total invoice amount: <span id="total-invoice">0</span>.

  <p>



    <button id="add">Add row</button>

edited Jan 1 at 13:52

answered Jan 1 at 12:14

Oliver Trampleasure

1,6861519

This works! Thank You very much!

– Gayath_chandi
Jan 1 at 13:16

Glad it worked. Good luck with the rest of your project

– Oliver Trampleasure
Jan 1 at 13:18

I want to make last column also a input field. How do I do that. <td> <input class="total-cost"></td> like this. And then I have to change // Print input values to output cell row.find("td input.total-cost").text(first * second); But that doesn't work

– Gayath_chandi
Jan 1 at 13:29

Inputs don't accept .text(), so you need to assign it using .val()

– Oliver Trampleasure
Jan 1 at 13:34

1

It works! sorry I can not upvote since my reputation is below 15 :(

– Gayath_chandi
Jan 1 at 14:00

|
show 4 more comments

The code below does what you would like.

I've add some classes so that it is easier to determine what each input and td is for.

I've also added the event triggers in a manner that means dynamically added rows will continue to work (click on the add button to see this in action).

Update changed the cost per row to an input as requested and added a sum function for the value of all rows.

Demo

// Add event trigger to inputs with class auto-calc

$(document).on("keyup change paste", "td > input.auto-calc", function() {



  // Determine parent row

  row = $(this).closest("tr");



  // Get first and second input values

  first = row.find("td input.unit-price").val();

  second = row.find("td input.amount").val();



  // Print input values to output cell

  row.find(".total-cost").val(first * second);





  // Update total invoice value

  var sum = 0;

  // Cycle through each input with class total-cost

  $("input.total-cost").each(function() {

    // Add value to sum

    sum += +$(this).val();

  });



  // Assign sum to text of #total-invoice

  // Using the id here as there is only one of these

  $("#total-invoice").text(sum);





});





// Add dynamic row to demonstrate works in this case

$(document).on("click", "#add", function() {



  $("tbody").append('<tr><th scope="row">ITEM003</th><td>KNIFE</td><td><input type="text" class="auto-calc unit-price form-control"></td><td><input type="text" class="auto-calc amount form-control"></td><td><input type="text" class="total-cost amount form-control"></td></tr>');

  $(this).remove();



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<table class="table table-sm">

  <thead>

    <tr>

      <th scope="col">Item ID</th>

      <th scope="col">Food Item</th>

      <th scope="col">Unit Price</th>

      <th scope="col">Amount</th>

      <th scope="col">Price</th>

    </tr>

  </thead>

  <tbody>



    <tr>

      <th scope="row">ITEM001</th>

      <td>PLATE</td>

      <td><input type="text" class="auto-calc unit-price form-control"></td>

      <td><input type="text" class="auto-calc amount form-control"></td>

      <td><input type="text" class="total-cost form-control"></td>

    </tr>

    

    

    <tr>

      <th scope="row">ITEM002</th>

      <td>SPOON</td>

      <td><input type="text" class="auto-calc unit-price form-control"></td>

      <td><input type="text" class="auto-calc amount form-control"></td>

      <td><input type="text" class="total-cost form-control"></td>

    </tr>

    

    

  </tbody>

</table>





<p>Total invoice amount: <span id="total-invoice">0</span>.

  <p>



    <button id="add">Add row</button>

edited Jan 1 at 13:52

answered Jan 1 at 12:14

Oliver Trampleasure

1,6861519

This works! Thank You very much!

– Gayath_chandi
Jan 1 at 13:16

Glad it worked. Good luck with the rest of your project

– Oliver Trampleasure
Jan 1 at 13:18

I want to make last column also a input field. How do I do that. <td> <input class="total-cost"></td> like this. And then I have to change // Print input values to output cell row.find("td input.total-cost").text(first * second); But that doesn't work

– Gayath_chandi
Jan 1 at 13:29

Inputs don't accept .text(), so you need to assign it using .val()

– Oliver Trampleasure
Jan 1 at 13:34

1

It works! sorry I can not upvote since my reputation is below 15 :(

– Gayath_chandi
Jan 1 at 14:00

|
show 4 more comments

The code below does what you would like.

I've add some classes so that it is easier to determine what each input and td is for.

I've also added the event triggers in a manner that means dynamically added rows will continue to work (click on the add button to see this in action).

Update changed the cost per row to an input as requested and added a sum function for the value of all rows.

Demo

// Add event trigger to inputs with class auto-calc

$(document).on("keyup change paste", "td > input.auto-calc", function() {



  // Determine parent row

  row = $(this).closest("tr");



  // Get first and second input values

  first = row.find("td input.unit-price").val();

  second = row.find("td input.amount").val();



  // Print input values to output cell

  row.find(".total-cost").val(first * second);





  // Update total invoice value

  var sum = 0;

  // Cycle through each input with class total-cost

  $("input.total-cost").each(function() {

    // Add value to sum

    sum += +$(this).val();

  });



  // Assign sum to text of #total-invoice

  // Using the id here as there is only one of these

  $("#total-invoice").text(sum);





});





// Add dynamic row to demonstrate works in this case

$(document).on("click", "#add", function() {



  $("tbody").append('<tr><th scope="row">ITEM003</th><td>KNIFE</td><td><input type="text" class="auto-calc unit-price form-control"></td><td><input type="text" class="auto-calc amount form-control"></td><td><input type="text" class="total-cost amount form-control"></td></tr>');

  $(this).remove();



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<table class="table table-sm">

  <thead>

    <tr>

      <th scope="col">Item ID</th>

      <th scope="col">Food Item</th>

      <th scope="col">Unit Price</th>

      <th scope="col">Amount</th>

      <th scope="col">Price</th>

    </tr>

  </thead>

  <tbody>



    <tr>

      <th scope="row">ITEM001</th>

      <td>PLATE</td>

      <td><input type="text" class="auto-calc unit-price form-control"></td>

      <td><input type="text" class="auto-calc amount form-control"></td>

      <td><input type="text" class="total-cost form-control"></td>

    </tr>

    

    

    <tr>

      <th scope="row">ITEM002</th>

      <td>SPOON</td>

      <td><input type="text" class="auto-calc unit-price form-control"></td>

      <td><input type="text" class="auto-calc amount form-control"></td>

      <td><input type="text" class="total-cost form-control"></td>

    </tr>

    

    

  </tbody>

</table>





<p>Total invoice amount: <span id="total-invoice">0</span>.

  <p>



    <button id="add">Add row</button>

edited Jan 1 at 13:52

answered Jan 1 at 12:14

Oliver Trampleasure

1,6861519

The code below does what you would like.

I've add some classes so that it is easier to determine what each input and td is for.

I've also added the event triggers in a manner that means dynamically added rows will continue to work (click on the add button to see this in action).

Update changed the cost per row to an input as requested and added a sum function for the value of all rows.

Demo

// Add event trigger to inputs with class auto-calc

$(document).on("keyup change paste", "td > input.auto-calc", function() {



  // Determine parent row

  row = $(this).closest("tr");



  // Get first and second input values

  first = row.find("td input.unit-price").val();

  second = row.find("td input.amount").val();



  // Print input values to output cell

  row.find(".total-cost").val(first * second);





  // Update total invoice value

  var sum = 0;

  // Cycle through each input with class total-cost

  $("input.total-cost").each(function() {

    // Add value to sum

    sum += +$(this).val();

  });



  // Assign sum to text of #total-invoice

  // Using the id here as there is only one of these

  $("#total-invoice").text(sum);





});





// Add dynamic row to demonstrate works in this case

$(document).on("click", "#add", function() {



  $("tbody").append('<tr><th scope="row">ITEM003</th><td>KNIFE</td><td><input type="text" class="auto-calc unit-price form-control"></td><td><input type="text" class="auto-calc amount form-control"></td><td><input type="text" class="total-cost amount form-control"></td></tr>');

  $(this).remove();



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<table class="table table-sm">

  <thead>

    <tr>

      <th scope="col">Item ID</th>

      <th scope="col">Food Item</th>

      <th scope="col">Unit Price</th>

      <th scope="col">Amount</th>

      <th scope="col">Price</th>

    </tr>

  </thead>

  <tbody>



    <tr>

      <th scope="row">ITEM001</th>

      <td>PLATE</td>

      <td><input type="text" class="auto-calc unit-price form-control"></td>

      <td><input type="text" class="auto-calc amount form-control"></td>

      <td><input type="text" class="total-cost form-control"></td>

    </tr>

    

    

    <tr>

      <th scope="row">ITEM002</th>

      <td>SPOON</td>

      <td><input type="text" class="auto-calc unit-price form-control"></td>

      <td><input type="text" class="auto-calc amount form-control"></td>

      <td><input type="text" class="total-cost form-control"></td>

    </tr>

    

    

  </tbody>

</table>





<p>Total invoice amount: <span id="total-invoice">0</span>.

  <p>



    <button id="add">Add row</button>

// Add event trigger to inputs with class auto-calc

$(document).on("keyup change paste", "td > input.auto-calc", function() {



  // Determine parent row

  row = $(this).closest("tr");



  // Get first and second input values

  first = row.find("td input.unit-price").val();

  second = row.find("td input.amount").val();



  // Print input values to output cell

  row.find(".total-cost").val(first * second);





  // Update total invoice value

  var sum = 0;

  // Cycle through each input with class total-cost

  $("input.total-cost").each(function() {

    // Add value to sum

    sum += +$(this).val();

  });



  // Assign sum to text of #total-invoice

  // Using the id here as there is only one of these

  $("#total-invoice").text(sum);





});





// Add dynamic row to demonstrate works in this case

$(document).on("click", "#add", function() {



  $("tbody").append('<tr><th scope="row">ITEM003</th><td>KNIFE</td><td><input type="text" class="auto-calc unit-price form-control"></td><td><input type="text" class="auto-calc amount form-control"></td><td><input type="text" class="total-cost amount form-control"></td></tr>');

  $(this).remove();



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<table class="table table-sm">

  <thead>

    <tr>

      <th scope="col">Item ID</th>

      <th scope="col">Food Item</th>

      <th scope="col">Unit Price</th>

      <th scope="col">Amount</th>

      <th scope="col">Price</th>

    </tr>

  </thead>

  <tbody>



    <tr>

      <th scope="row">ITEM001</th>

      <td>PLATE</td>

      <td><input type="text" class="auto-calc unit-price form-control"></td>

      <td><input type="text" class="auto-calc amount form-control"></td>

      <td><input type="text" class="total-cost form-control"></td>

    </tr>

    

    

    <tr>

      <th scope="row">ITEM002</th>

      <td>SPOON</td>

      <td><input type="text" class="auto-calc unit-price form-control"></td>

      <td><input type="text" class="auto-calc amount form-control"></td>

      <td><input type="text" class="total-cost form-control"></td>

    </tr>

    

    

  </tbody>

</table>





<p>Total invoice amount: <span id="total-invoice">0</span>.

  <p>



    <button id="add">Add row</button>

// Add event trigger to inputs with class auto-calc

$(document).on("keyup change paste", "td > input.auto-calc", function() {



  // Determine parent row

  row = $(this).closest("tr");



  // Get first and second input values

  first = row.find("td input.unit-price").val();

  second = row.find("td input.amount").val();



  // Print input values to output cell

  row.find(".total-cost").val(first * second);





  // Update total invoice value

  var sum = 0;

  // Cycle through each input with class total-cost

  $("input.total-cost").each(function() {

    // Add value to sum

    sum += +$(this).val();

  });



  // Assign sum to text of #total-invoice

  // Using the id here as there is only one of these

  $("#total-invoice").text(sum);





});





// Add dynamic row to demonstrate works in this case

$(document).on("click", "#add", function() {



  $("tbody").append('<tr><th scope="row">ITEM003</th><td>KNIFE</td><td><input type="text" class="auto-calc unit-price form-control"></td><td><input type="text" class="auto-calc amount form-control"></td><td><input type="text" class="total-cost amount form-control"></td></tr>');

  $(this).remove();



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<table class="table table-sm">

  <thead>

    <tr>

      <th scope="col">Item ID</th>

      <th scope="col">Food Item</th>

      <th scope="col">Unit Price</th>

      <th scope="col">Amount</th>

      <th scope="col">Price</th>

    </tr>

  </thead>

  <tbody>



    <tr>

      <th scope="row">ITEM001</th>

      <td>PLATE</td>

      <td><input type="text" class="auto-calc unit-price form-control"></td>

      <td><input type="text" class="auto-calc amount form-control"></td>

      <td><input type="text" class="total-cost form-control"></td>

    </tr>

    

    

    <tr>

      <th scope="row">ITEM002</th>

      <td>SPOON</td>

      <td><input type="text" class="auto-calc unit-price form-control"></td>

      <td><input type="text" class="auto-calc amount form-control"></td>

      <td><input type="text" class="total-cost form-control"></td>

    </tr>

    

    

  </tbody>

</table>





<p>Total invoice amount: <span id="total-invoice">0</span>.

  <p>



    <button id="add">Add row</button>

edited Jan 1 at 13:52

answered Jan 1 at 12:14

Oliver Trampleasure

1,6861519

edited Jan 1 at 13:52

answered Jan 1 at 12:14

Oliver Trampleasure

1,6861519

answered Jan 1 at 12:14

Oliver Trampleasure

1,6861519

answered Jan 1 at 12:14

Oliver Trampleasure

1,6861519

This works! Thank You very much!

– Gayath_chandi
Jan 1 at 13:16

Glad it worked. Good luck with the rest of your project

– Oliver Trampleasure
Jan 1 at 13:18

I want to make last column also a input field. How do I do that. <td> <input class="total-cost"></td> like this. And then I have to change // Print input values to output cell row.find("td input.total-cost").text(first * second); But that doesn't work

– Gayath_chandi
Jan 1 at 13:29

Inputs don't accept .text(), so you need to assign it using .val()

– Oliver Trampleasure
Jan 1 at 13:34

1

It works! sorry I can not upvote since my reputation is below 15 :(

– Gayath_chandi
Jan 1 at 14:00

|
show 4 more comments

This works! Thank You very much!

– Gayath_chandi
Jan 1 at 13:16

Glad it worked. Good luck with the rest of your project

– Oliver Trampleasure
Jan 1 at 13:18

I want to make last column also a input field. How do I do that. <td> <input class="total-cost"></td> like this. And then I have to change // Print input values to output cell row.find("td input.total-cost").text(first * second); But that doesn't work

– Gayath_chandi
Jan 1 at 13:29

Inputs don't accept .text(), so you need to assign it using .val()

– Oliver Trampleasure
Jan 1 at 13:34

1

It works! sorry I can not upvote since my reputation is below 15 :(

– Gayath_chandi
Jan 1 at 14:00

This works! Thank You very much!

– Gayath_chandi
Jan 1 at 13:16

Glad it worked. Good luck with the rest of your project

– Oliver Trampleasure
Jan 1 at 13:18

I want to make last column also a input field. How do I do that. <td> <input class="total-cost"></td> like this. And then I have to change // Print input values to output cell row.find("td input.total-cost").text(first * second); But that doesn't work

– Gayath_chandi
Jan 1 at 13:29

Inputs don't accept .text(), so you need to assign it using .val()

– Oliver Trampleasure
Jan 1 at 13:34

It works! sorry I can not upvote since my reputation is below 15 :(

– Gayath_chandi
Jan 1 at 14:00

|
show 4 more comments

I found the answer but this only works if there is only one row. But in my case it have many rows.

<input type="text" name="input1" id="input1" value="5">

<input type="text" name="input2" id="input2" value=""> <a href="javascript: void(0)" 

onClick="calc()">Calculate</a>



<input type="text" name="output" id="output" value="">

And in javascript

$("#input2,#input1").keyup(function () {



$('#output').val($('#input1').val() * $('#input2').val());



});

This will simply multiply columns.

answered Jan 1 at 13:08

Gayath_chandi

144

The issue you here is using the id parameter, it will just find the first example of each. There's no context for the code to recognise that there are multiple rows. This would be a very good way of doing it, if the calculation and inputs only occured once on a page.

– Oliver Trampleasure
Jan 1 at 13:17

add a comment |

I found the answer but this only works if there is only one row. But in my case it have many rows.

<input type="text" name="input1" id="input1" value="5">

<input type="text" name="input2" id="input2" value=""> <a href="javascript: void(0)" 

onClick="calc()">Calculate</a>



<input type="text" name="output" id="output" value="">

And in javascript

$("#input2,#input1").keyup(function () {



$('#output').val($('#input1').val() * $('#input2').val());



});

This will simply multiply columns.

answered Jan 1 at 13:08

Gayath_chandi

144

The issue you here is using the id parameter, it will just find the first example of each. There's no context for the code to recognise that there are multiple rows. This would be a very good way of doing it, if the calculation and inputs only occured once on a page.

– Oliver Trampleasure
Jan 1 at 13:17

add a comment |

I found the answer but this only works if there is only one row. But in my case it have many rows.

<input type="text" name="input1" id="input1" value="5">

<input type="text" name="input2" id="input2" value=""> <a href="javascript: void(0)" 

onClick="calc()">Calculate</a>



<input type="text" name="output" id="output" value="">

And in javascript

$("#input2,#input1").keyup(function () {



$('#output').val($('#input1').val() * $('#input2').val());



});

This will simply multiply columns.

answered Jan 1 at 13:08

Gayath_chandi

144

I found the answer but this only works if there is only one row. But in my case it have many rows.

<input type="text" name="input1" id="input1" value="5">

<input type="text" name="input2" id="input2" value=""> <a href="javascript: void(0)" 

onClick="calc()">Calculate</a>



<input type="text" name="output" id="output" value="">

And in javascript

$("#input2,#input1").keyup(function () {



$('#output').val($('#input1').val() * $('#input2').val());



});

This will simply multiply columns.

answered Jan 1 at 13:08

Gayath_chandi

144

answered Jan 1 at 13:08

Gayath_chandi

144

answered Jan 1 at 13:08

Gayath_chandi

144

answered Jan 1 at 13:08

Gayath_chandi

144

The issue you here is using the id parameter, it will just find the first example of each. There's no context for the code to recognise that there are multiple rows. This would be a very good way of doing it, if the calculation and inputs only occured once on a page.

– Oliver Trampleasure
Jan 1 at 13:17

add a comment |

The issue you here is using the id parameter, it will just find the first example of each. There's no context for the code to recognise that there are multiple rows. This would be a very good way of doing it, if the calculation and inputs only occured once on a page.

– Oliver Trampleasure
Jan 1 at 13:17

The issue you here is using the id parameter, it will just find the first example of each. There's no context for the code to recognise that there are multiple rows. This would be a very good way of doing it, if the calculation and inputs only occured once on a page.

– Oliver Trampleasure
Jan 1 at 13:17

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk

How to make table dynamically multiply column 1 and column 2 and answer in column 3 in Laravel

2 Answers
2

Demo

Your Answer

Post as a guest

2 Answers
2

2 Answers
2

Demo

Demo

Demo

Demo

Post as a guest

Popular posts from this blog

Mossoró

Error while reading .h5 file using the rhdf5 package in R

Pushsharp Apns notification error: 'InvalidToken'

How to make table dynamically multiply column 1 and column 2 and answer in column 3 in Laravel

2 Answers 2

Demo

Your Answer

Sign up or log in

Post as a guest

Post as a guest

2 Answers 2

2 Answers 2

Demo

Demo

Demo

Demo

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Mossoró

Error while reading .h5 file using the rhdf5 package in R

Pushsharp Apns notification error: 'InvalidToken'

2 Answers
2

2 Answers
2

2 Answers
2