javascript - 使用同一页面上显示的相同函数将结果相乘

Question

同样对于这个，我不知道该怎么调用它，但我会尽力解释它。

我之前创建了一个与此类似的问题，但确实得到了回答，但这只是因为我不是 100% 确定我在寻找什么。现在我已经弄清楚了我需要什么等等。

所以我创建了这个示例，您会看到有多个输入，但它们只在第一列中起作用(因为不知道如何使其他列起作用)。所以现在我需要使用相同的函数让它在所有其他列中工作。

EXAMPLE

HTML:

<table>
    <tr>
        <th></th>
        <th>Option1</th>
        <th>Option2</th>
        <th>Option3</th>
        <th>Option4</th>
    </tr>
    <tr>
        <td>Money</td>
        <td><input type="number" id="money" /></td>
        <td><input type="number" /></td>
        <td><input type="number" /></td>
        <td><input type="number" /></td>
    </tr>
    <tr>
        <td>Upfront</td>
        <td><input type="number" id="upfront" /></td>
        <td><input type="number" /></td>
        <td><input type="number" /></td>
        <td><input type="number" /></td>
    </tr>
    <tr>
        <td>Overall Price</td>
        <td id="overallPrice"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Discount</td>
        <td><input type="number" id="discount" /></td>
        <td><input type="number" /></td>
        <td><input type="number" /></td>
        <td><input type="number" /></td>
    </tr>
    <tr>
        <td>Dicount Price</td>
        <td id="discountPrice"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Javascript/jQuery:

$(document).ready(function () {
    $('input').keyup(function () {
        overallPrice();
        discountPrice();
    });
});

function overallPrice() {
    var cal1, cal2, result;
    cal1 = parseFloat(document.getElementById("money").value);
    cal2 = parseFloat(document.getElementById("upfront").value);
    result = cal1 - cal2;
    document.getElementById("overallPrice").innerHTML = "£" + result;
    return result;
}

function discountPrice() {
    var cal1, cal2, result;
    cal1 = parseFloat(document.getElementById("discount").value);
    cal2 = overallPrice();
    result = cal2 - cal1;
    document.getElementById("discountPrice").innerHTML = "£" + result;
}

所以我们有 2 个输入将创建“总价”，然后第 3 个输入将采用该数字并给出“折扣价”。如果这只是 1 个单列，我可以做到这一点，但因为我需要它对所有列都起作用，所以我不确定如何使用相同的函数来做到这一点。

如果不让我知道，希望这有某种意义，我会尝试解释更多。

这是我另一个问题的链接，我将这部分添加到它的末尾只是为了让你想看看我从哪里开始等。

Other Question

*注意:会有2组以上的输入，这只是一个例子。在我的真实版本中，某些输入不会用于某些列，我将不得不更改一些函数以不同方式计算某些列。 *

Answer 1

这是另一个解决方案:FIDDLE

想法是找出输入在哪一列(使用 .index())并将该索引传递给 overallPrice() 和 discountPrice() 函数。

HTML

<table>
    <tr>
        <th></th>
        <th>Option1</th>
        <th>Option2</th>
        <th>Option3</th>
        <th>Option4</th>
    </tr>
    <tr id="money">
        <td>Money</td>
        <td><input type="number"/></td>
        <td><input type="number" /></td>
        <td><input type="number" /></td>
        <td><input type="number" /></td>
    </tr>
    <tr id="upfront">
        <td>Upfront</td>
        <td><input type="number"/></td>
        <td><input type="number" /></td>
        <td><input type="number" /></td>
        <td><input type="number" /></td>
    </tr>
    <tr id="overallPrice">
        <td>Overall Price</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr id="discount">
        <td>Discount</td>
        <td><input type="number"/></td>
        <td><input type="number" /></td>
        <td><input type="number" /></td>
        <td><input type="number" /></td>
    </tr>
    <tr id="discountPrice">
        <td>Dicount Price</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

JavaScript

$(document).ready(function () {
    $('input').change(function () {
        var $this = $(this),
            $row = $this.closest('tr'),
            $column = $this.closest('td'),
            columnIndex = $row.find('td').index($column[0]);
        //overallPrice(columnIndex);
        discountPrice(columnIndex);
    });
});

function overallPrice(column) {
    var cal1, cal2, result;
    cal1 = parseFloat($('#money td').eq(column).find('input').val() || '0');
    cal2 = parseFloat($('#upfront td').eq(column).find('input').val() || '0');
    result = cal1 - cal2;
    $('#overallPrice td').eq(column).text("£" + result);
    return result;
}

function discountPrice(column) {
    var cal1, cal2, result;
    cal1 = parseFloat($('#discount td').eq(column).find('input').val() || '0');
    cal2 = overallPrice(column);
    result = cal2 - cal1;
    $('#discountPrice td').eq(column).text("£" + result);
}