使用jQuery

Question

我有一个HTML表格，每一行都有一些td＆＃39; s。其中一个td包含一个数字输入框。

我现在尝试使用jQuery获取输入的数字，将其乘以同一行中另一个td内的数字，然后将结果显示在另一个td（同一行）中，但到目前为止我可以＆＃ 39;似乎让它发挥作用。

不确定我是否遗漏了一些简单的内容，或者我是否完全没有标记

这是我的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);
        });
    });
}

最值得赞赏的任何帮助 感谢

Answer 1

使用input事件代替keyup，这将适用于任何类型的值更改。取父tr，然后在其中找到.numerator文字。然后将input值与.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);
});

完整代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

当您调用jQuery方法时，您将离开() ... val应为val()且html应为html()

这些值也是字符串