javascript – 使用jQuery获取输入值,乘以内容并在另一个中显示结果

2023年3月20日 211次阅读

我有一个
HTML表,每行都有一些td.其中一个td包含一个数字输入框.

我现在正在尝试使用jQuery获取输入的数字,将其乘以同一行中另一个td内的数字,然后将结果显示在另一个td(同一行)中,但到目前为止我似乎无法得到它工作.

不确定我是否遗漏了一些简单的东西,或者我完全不合适

这是我的HTML

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

        <tr data-row-num="1">
        <td>Item 2</td>
        <td><span class="numerator">10</span> / 1</td>
        <td><form><input type="number"></form></td>
        <td class="rowtotal">£0</td>
        </tr>

        <tr data-row-num="1">
        <td>Item 3</td>
        <td><span class="numerator">10</span> / 1</td>
        <td><form><input type="number"></form></td>
        <td class="rowtotal">£0</td>
        </tr>
    </tbody>
</table>

到目前为止,这是我的jQuery

//Finds inputted text in table and binds to function calculateSum?
$(function () {
    var tbl = $('.my-table');
    tbl.find('input[type=number]').bind("keyup", function () {
    calculateSum();
    });
});

//Finds numerator and multiplies by input, outputs result?
function calculateSum() {
    var tbl = $('.my-table');
    tbl.find('tr').each(function () {
        var numeratorValue = $(this).find('.numerator');
        var numerator = numeratorValue.html;
        $(this).find('input[type=number]').each(function () {
            var result = $(this).val * numerator;
            $('.rowtotal').html('£' + result);
        });
    });
}

任何帮助最受赞赏
谢谢

最佳答案 使用输入事件而不是键盘,这将适用于任何类型的值更改.取父tr,然后在其中找到.numerator文本.之后,将输入值与.numerator文本相乘,并将其设置为.rowtotal.

$('input[type=number]').on("input", function () {
    var tr = $(this).closest('tr');
    var num = this.value;
    var numerator = tr.find('.numerator').text();
    tr.find('.rowtotal').text('£' + num * numerator);
});

完整代码

$('input[type=number]').on("input", function () {
    var tr = $(this).closest('tr');
    var num = this.value;
    var numerator = tr.find('.numerator').text();
    tr.find('.rowtotal').text('£' + num * numerator);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="my-table">
    <thead>
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
            <td>Header 3</td>
            <td>Header 4</td>
        </tr>
    </thead>
    <tbody>
        <tr data-row-num="1">
            <td>Item 1</td>
            <td><span class="numerator">10</span> / 1</td>
            <td><form><input type="number"></form></td>
            <td class="rowtotal">£0</td>
        </tr>

        <tr data-row-num="1">
            <td>Item 2</td>
            <td><span class="numerator">10</span> / 1</td>
            <td><form><input type="number"></form></td>
            <td class="rowtotal">£0</td>
        </tr>

        <tr data-row-num="1">
            <td>Item 3</td>
            <td><span class="numerator">10</span> / 1</td>
            <td><form><input type="number"></form></td>
            <td class="rowtotal">£0</td>
        </tr>
    </tbody>
</table>
点赞