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

我也不知道该怎么称呼它，但我会尽我所能解释它

我之前提出了一个类似的问题，但没有得到回答，只是因为我不能100%确定我在寻找什么。现在我已经弄清楚我需要什么了等等

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

HTML: 因此，我们有两个输入将创建“总体价格”，然后第三个输入将获取该数字并给出“折扣价格”。如果这只是一个单列，我可以做到这一点没有问题，但因为我需要它来为所有的列工作，我不知道如何使用相同的函数做到这一点

如果不让我知道，希望这有点道理，我会尝试解释更多

这是我的另一个问题的链接，我把这部分添加到了它的末尾，只是把你想看我从哪里开始的地方封装起来，等等

---

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

尝试为单个单元格指定一个自定义属性（我使用了

count

），然后使用该属性访问同一列中的所有单元格（使用

parentElement.childNodes

这件事不起作用，因为此实例中的父节点是行，而不是列）。我已将

count

值传递给您的

overallPrice

和

discountPrice

函数，并稍微修改了HTML

脚本

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

这里有另一个解决方案：

这样做的目的是找出输入在哪一列（使用

.index（）

），并将该索引交给

overallPrice（）

和

discountPrice（）

函数

HTML

---

那么它在第一盘就可以了？但不在其他集合上？因为其他单元格（

td

tags）没有分配给它们的id/类，所以当您编写

document.getElementById（“money”）.value时，它只引用每行的第一个单元格。您是否对（其他集合的）其他输入使用相同的id？@mujtabhaider它在第一种情况下运行良好，因为这是我知道如何创建它的唯一方法。我不知道如何使用第一列用于其他列的相同函数。@tewathia不，你误解了。再读一遍我的问题。我希望所有列都使用单独的输入，第一列将使用它拥有的3个输入，第二列将使用它的3个输入等。因此，您可以输入所有不同的数字，使用相同的函数，它将计算它们并在单独的列中显示。@Ruddy我已经解释过了，如果您有任何问题，请告诉我。我已将
$（'input'）.keyup（）
更改为
$（'input'）.change（）
，并且没有必要在事件处理程序中同时调用
overallPrice（）
和
discountPrice（）
，因为
discountPrice（）
正在调用
overallPrice（）
。
$(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;
}

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

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

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

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