使用相同页面上显示的相同功能乘以结果

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个输入将采用该数字并给出“折扣价”。如果这只是一个单列我可以做到没有问题但是因为我需要这个才能用于所有列我不知道如何使用相同的函数来做到这一点。

希望如果不让我知道，这会产生某种意义，我会尝试解释一下。

这是我的另一个问题的链接，我将这部分添加到它的末尾，只是包住你想看我开始的地方等。

Other Question

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

Answer 1

尝试为各个单元格提供自定义属性（我使用过count），然后使用该属性访问同一列中的所有单元格（使用parentElement.childNodes的东西不起作用，因为此实例中的父级将是行，而不是列）。我已将count值传递给您的overallPrice和discountPrice函数，并对HTML进行了一些修改。

<强> SCRIPT

$(document).ready(function () {
    $('input').keyup(function () {
        discountPrice(this.attributes.count.value);
    });
});


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

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

HTML 您的行应如下所示：

<tr>
    <td>Overall Price</td>
    <td count="1" class="overallPrice"></td>
    <td count="2" class="overallPrice"></td>
    <td count="3" class="overallPrice"></td>
    <td count="4" class="overallPrice"></td>
</tr>

FIDDLE

编辑：即使不添加新的（计数）属性也可以完成此操作。您可以执行以下操作，而不是将this.attributes.count.value传递给两个价格函数：

$('input').change(function () {
        discountPrice($(this).parent().prevAll().length);
});

FIDDLE2

Answer 2

这是另一种解决方案：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);
}