实施例

Question

不确定该如何称之为诚实，但我们会看到你是否明白我的问题。

我在标准HTML页面上有一个表，并且使用Javascript / jQuery我有一些计算。

实施例

function addThem() {
    var result;

    result = userInput + 100;
    return result;
}

这只是我所拥有的简单（未完成）功能的一个例子。我想要做的是获取用户输入，然后在表格中显示结果。据我所知，我可以使用：

document.getElementById("addThemResult").innerHTML = result;

，HTML将是：

<td id="addThemResult"></td>

之前我已经完成了这项工作。现在我的问题是，我将有多个字段用于相同的事情，但不知道如何接受多个用户输入并使用相同的功能显示它们。

实例

我打赌我没有多大意义所以我会尝试创建一个小例子。

EXAMPLE HERE

HTML：

<table>
    <tr>
        <td></td>
        <td>One</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>Money</td>
        <td>
            <input id="money1" />
        </td>
        <td>
            <input id="money2" />
        </td>
    </tr>
    <tr>
        <td>Money Left</td>
        <td id="moneyleft1"></td>
        <td id="moneyleft2"></td>
    </tr>
</table>

的Javascript / jQuery的：

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

function cal() {
    var cal1, result;
    cal1 = parseFloat(document.getElementById("money1").value);

    result = cal1 - 100;
    document.getElementById("moneyleft1").innerHTML = "£" + result;
}

因此，如果我们查看我所做的示例，如果您将值输入“money - one”输入，它将显示以下结果。我现在要做的是使用第二个输入并使用相同的函数将结果输入“money - two”。

我将如何做到这一点，请注意我需要使用它的更大，并且有大约6行。

我希望这有点意义，任何帮助都会很棒，这可能是一件简单的事情，但我似乎无法理解它。

更新

当我遇到更多时，我需要做的事情已经改变了我的想法。现在有更多的投入，它们几乎无处不在。其中一些需要在计算中使用，而其他一些将在一个字段中显示结果

UPDATE EXAMPLE

正如您所看到的，无论您输入什么输入，结果都会始终发生变化。我需要停下来，我想指出它们应该去哪里以及何时应该更改。

E.g：

Money = 10000 so the field "cal1" for that column changes.

如果我输入里程输入：

Miles = 2300 the "cal1" field should not change and "cal2" field should have the result.

我只能这样做，但感觉是作弊。

CHEAT WAY?

所以在每个输入上加上class然后键入该类。

编辑：我仍然无法从同一列的输入中获取值。我认为我的“欺骗”方式也行不通。

更新2：

对，我做了一个更好的例子，那是我的错，因为我没有解释它本来应该有的。

在此示例中，您将看到有多个输入但它们仅在第一列中起作用（由于不知道如何使其他输入工作）。所以现在我需要使用相同的函数在ALL列中使用它。

UPDATE 2 EXAMPE

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组输入，这只是一个例子。

Answer 1

这适用于任意数量的<td> ..只是最后一个表行应该有一个id ..在我的情况下是total

...
 <tr id="total">
    <td>Money Left</td>
    <td></td>
    <td></td>
</tr>
....

试试这个

 $(document).ready(function () {
  $('input').keyup(function () {
     cal(this);
  });
 });

 function cal(obj) {

   var result = parseFloat(obj.value) - 100;
   var tdPos=$(obj).parent().index();
   $('#total').find('td:eq('+tdPos+')').html("£" + result);
}

如果您无法修改HTML元素，那么...如果没有ID，您的选择器应

 function cal(obj) {
   var cal1, result;
   cal1 = parseFloat(obj.value);

   result = cal1 - 100;
   var tdPos=$(obj).parent().index();
   //$('#total').find('td:eq('+tdPos+')').html("£" + result);
   //here
   $(obj).closest('tr').next().find('td:eq('+tdPos+')').html("£" + result); 
}

简而言之

$(document).ready(function () {
 $('input').keyup(function () {
   var result = parseFloat(this.value) - 100;
   var tdPos=$(this).parent().index();
   $('#total').find('td:eq('+tdPos+')').html("£" + result);
 });
});

但我总是选择第一个id选择器..性能明智，第一个是更好的，因为id选择器很快，不必遍历DOM元素。

fiddle here

2nd fiddle

fiddle with multiple columns

Answer 2

使用this。以及对您的ID的一些规则：）

$(document).ready(function () {
    $('input').keyup(function () {
        cal($(this));
    });
});

function cal(input) {
    var cal1 = parseFloat(input.val()),
        result = cal1 - 100;
    $('#' + input.attr("id") + "left").html("£" + result);
}

我建议您将结果字段命名为输入并附加“左”。然后，您将$(this)作为输入发送到cal功能。它将引用keyup事件被触发的元素。要引用输出/结果单元格，您将获得输入字段的ID，并将其与“left”连接。

希望它有所帮助。代码未经测试：）

Answer 3

试试这个，

$(document).ready(function () {
    $('input').keyup(function () {
        cal(this);
    });
});

function cal(obj) {
    var cal1, result;
    cal1 = parseFloat(document.getElementById(obj.id).value);

    result = cal1 - 100;
    if(obj.id=='money1'){
    document.getElementById("moneyleft1").innerHTML = "£" + result;
    }else{
         document.getElementById("moneyleft2").innerHTML = "£" + result;
    }
}

同时更改ID，因为它应该是唯一的。

<td id="moneyleft1"></td>
<td id="moneyleft2"></td>

<强> DEMO Updated

对于多个<td>，您应该尝试这个

function cal(obj) {
    var cal1, result;
    cal1 = parseFloat(document.getElementById(obj.id).value);

    result = cal1 - 100;var $this = $(this);
    var cellIndex = $(obj).parent().index();
    $(obj).closest('tr').next().children().eq(cellIndex).html("£"+result);

}

<强> NEW DEMO

Answer 4

此答案利用输入和输出位于表格的相应列中，而不是像其他答案一样构建ID。

HTML：

<tr id="money">
    <td>Money</td>
    <td>
        <input />
    </td>
    <td>
        <input />
    </td>
</tr>
<tr id="moneyleft">
    <td>Money Left</td>
    <td></td>
    <td></td>
</tr>

JS：

$(document).ready(function () {
    $("#money input").keyup(function () {
        var pos = $(this).parent().index();
        var result = parseFloat($(this).val()) - 100;
        $("#moneyleft").children().eq(pos).text("£" + result);
    });
});

DEMO

更新：

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>

JS：

$(document).ready(function () {
    $("input").keyup(function () {
        var pos = $(this).parent().index();
        overallPrice(pos);
        discountPrice(pos);
    });
});

function overallPrice(index) {
    var money = parseFloat($("#money").children().eq(index).find("input").val());
    var upfront = parseFloat($("#upfront").children().eq(index).find("input").val());
    var result = money - upfront;
    $("#overallPrice td").eq(index).text("£" + result);
    return result;
}

function discountPrice(index) {
    var discount = parseFloat($("#discount").children().eq(index).find("input").val());
    var overall = overallPrice(index);
    var result = overall - discount;
    $("#discountPrice td").eq(index).text("£" + result);
    return result;
}

DEMO

多次计算，显示在同一页面上

实施例

实例

HTML：

的Javascript / jQuery的：

更新

更新2：

HTML：

的Javascript / jQuery的：

4 个答案: