Calculate the result by multiplying each row value with the value provided as input

Question

Calculate the result by multiplying each row value with the value provided as input

Check out this HTML code snippet

<form><input type="number"></form>
<table class="my-table">
<thead>
    <tr>
        <td>Header 1</td>
        <td>Header 2</td>
    </tr>
</thead>
<tbody>
    <tr data-row-num="1">
        <td>Item 1</td>
        <td>£0</td>
    </tr>
    <tr data-row-num="1">
        <td>Item 2</td>
        <td>£5</td>
    </tr>
    <tr data-row-num="1">
        <td>Item 3</td>
        <td>£10</td>
    </tr>
</tbody>

I'm trying to multiply the values in the last column of each row by the input value above and display the new values. I've been playing around with some JavaScript but could really use some help.

<script type="text/javascript>
$('input[type=number]').on("input", function () {
var tr = $('input[type=number]').closest('tr');
var num = this.value;
var numerator = tr.find('td:nth-child(2)').text();
tr.find('td:last-child').text('£' + num * numerator);

});

Your assistance would be greatly appreciated!

javascript

Answer 1

Answer №1

Insert your pricing within span tags for a more visually appealing display and better use of selectors. Utilize jQuery's .each() function to iterate through your prices.

<html>
    <head>
        <script src="//code.jquery.com/jquery-2.2.4.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="myForm"><input type="number" id="myNumber" value="5"><input type="submit" value="Do"></form>
        <table class="my-table">
            <thead>
                <tr>
                    <td>Header 1</td>
                    <td>Header 2</td>
                </tr>
            </thead>
            <tbody>
                <tr data-row-num="1">
                    <td>Item 1</td>
                    <td>£<span class="price">10</span></td>
                </tr>
                <tr data-row-num="1">
                    <td>Item 2</td>
                    <td>£<span class="price">100</span></td>
                </tr>
                <tr data-row-num="1">
                    <td>Item 3</td>
                    <td>£<span class="price">1000</span></td>
                </tr>
            </tbody>
        </table>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#myForm ').submit(function (e) {
                    e.preventDefault();

                    // add attribute 'step="0.01"' to input, if you need to use parseFloat()
                    var input = parseInt($(this).find('#myNumber').val());
                    $('.my-table tr td > span.price').each(function (k, item) {
                        var current = parseInt($(item).text());
                        $(item).text(current * input);
                    });
                    return false;
                });
            });
        </script>
    </body>
</html>

Fiddle

Answer 2

Insert your pricing within span tags for a more visually appealing display and better use of selectors. Utilize jQuery's .each() function to iterate through your prices.

<html>
    <head>
        <script src="//code.jquery.com/jquery-2.2.4.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="myForm"><input type="number" id="myNumber" value="5"><input type="submit" value="Do"></form>
        <table class="my-table">
            <thead>
                <tr>
                    <td>Header 1</td>
                    <td>Header 2</td>
                </tr>
            </thead>
            <tbody>
                <tr data-row-num="1">
                    <td>Item 1</td>
                    <td>£<span class="price">10</span></td>
                </tr>
                <tr data-row-num="1">
                    <td>Item 2</td>
                    <td>£<span class="price">100</span></td>
                </tr>
                <tr data-row-num="1">
                    <td>Item 3</td>
                    <td>£<span class="price">1000</span></td>
                </tr>
            </tbody>
        </table>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#myForm ').submit(function (e) {
                    e.preventDefault();

                    // add attribute 'step="0.01"' to input, if you need to use parseFloat()
                    var input = parseInt($(this).find('#myNumber').val());
                    $('.my-table tr td > span.price').each(function (k, item) {
                        var current = parseInt($(item).text());
                        $(item).text(current * input);
                    });
                    return false;
                });
            });
        </script>
    </body>
</html>

Fiddle

Calculate the result by multiplying each row value with the value provided as input

Answer №1

Similar questions

how to create a smooth transition back to the original state after a click event

Creating a spinning or swinging motion using scriptaculous shake

What is the method for identifying which individual element is responsible for activating an event listener?

The pattern on one of the cube faces is mirrored

Is it possible for me to use AJAX to load content from a string? I am attempting to postpone the activation of certain HTML

Refinement of chosen selection

AngularJs: The ability to rate or rate functionality

Unfulfilled commitment on bcrypt

Encountering errors when trying to render views in Node/Express is a common

In Chrome, the `Jquery $('input[name=""]').change(function will not be triggered unless there is an unhandled error following it

Basic click event triggered every second click in JavaScript and HTML

How to conditionally set the active class in a React component

React: An error has occurred - Properties cannot be read from an undefined value

My Node/Express application is failing to recognize updates made to my Pug view files

Jstree's select_node function is failing to trigger

Issue: There was a problem resolving the module @react-native-community/async-storage for iOS

Tips for managing nested objects within React state and keeping them updated

Switch up the side navigation panel display

How can one activate a function using jQuery and then proceed to activate another function once the first function has finished executing?

Javascript - readjust weight distribution accordingly when a weight is removed