Question

我在这个网站上找到了一个用于更新表格行的jquery函数。现在我需要列的总数。任何人？我，我不熟悉jquery，并尝试了很多东西，但没有让它工作。

小提琴：http://jsfiddle.net/heliosh/r7dvay4o/

JS

$(document).ready(function () {
    function updateArticle1() {
        var Persons = parseFloat($("#dare_price1").val());
        var total = (Persons) * 2.00;
        var total = total.toFixed(2);
        $("#total_price_amount1").val(total);
    }
    $(document).on("change, keyup", "#dare_price1", updateArticle1);
});

$(document).ready(function () {
    function updateArticle2() {
        var Animals = parseFloat($("#dare_price2").val());
        var total = (Animals) * 3.50;
        var total = total.toFixed(2);
        $("#total_price_amount2").val(total);
    }
    $(document).on("change, keyup", "#dare_price2", updateArticle2);
});

$(document).ready(function () {
    function updateArticle3() {
        var Bedlinen = parseFloat($("#dare_price3").val());
        var total = (Bedlinen) * 8.50;
        var total = total.toFixed(2);
        $("#total_price_amount3").val(total);
    }
    $(document).on("change, keyup", "#dare_price3", updateArticle3);
});

$(document).ready(function () {
    function updateArticle4() {
        var Towels = parseFloat($("#dare_price4").val());
        var total = (Towels) * 7.50;
        var total = total.toFixed(2);
        $("#total_price_amount4").val(total);
    }
    $(document).on("change, keyup", "#dare_price4", updateArticle4);
});

HTML

<table>
    <tr>
        <td>Persons?</td>
        <td>
            <input class="span4 input-big" id="dare_price1" name="Persons" value="" size="30" type="text" />
        </td>
    </tr>
    <tr>
        <td>Animals?</td>
        <td>
            <input class="span4 input-big" id="dare_price2" name="Animals" value="" size="30" type="text" />
        </td>
    </tr>
    <tr>
        <td>Bedlinen?</td>
        <td>
            <input class="span4 input-big" id="dare_price3" name="Bedlinen" value="" size="30" type="text" />
        </td>
    </tr>
    <tr>
        <td>Towels?</td>
        <td>
            <input class="span4 input-big" id="dare_price4" name="Towels" value="" size="30" type="text" />
        </td>
    </tr>
</table>
<table style="width: 50%">
    <tr>
        <td style="width: 403px"></td>
        <td></td>
    </tr>
    <tr>
        <td style="width: 403px">Rentalprice</td>
        <td>189.00</td>
        <td>Euro</td>
    </tr>
    <tr>
        <td style="width: 403px">Taxes</td>
        <td style="width: 50px">
            <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount1" readonly="readonly" name="PricePersons" value="" />
        </td>
        <td>Euro</td>
    </tr>
    <tr>
        <td style="width: 403px"><span lang="nl">Animals</span>
        </td>
        <td>
            <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount2" readonly="readonly" name="PriceAnimals" value="" />
        </td>
        <td>Euro</td>
    </tr>
    <tr>
        <td style="width: 403px"><span lang="nl">Bedlinen</span>
        </td>
        <td>
            <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount3" readonly="readonly" name="PriceBedlinen" value="" />
        </td>
        <td>Euro</td>
    </tr>
    <tr>
        <td style="width: 403px"><span lang="nl">Towels</span>
        </td>
        <td>
            <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount4" readonly="readonly" name="PriceTowels" value="" />
        </td>
        <td>Euro</td>
    </tr>
    <tr>
        <td style="width: 403px">Total</td>
        <td>&nbsp;</td>
        <td>Euro</td>
    </tr>
</table>

Answer 1

您已更新fiddle。

我计算所有项目的总计。

以下是摘录。

$(document).ready(function() {
  function updateArticle1() {
    var Persons = parseFloat($("#dare_price1").val());
    var total = (Persons) * 2.00;
    var total = total.toFixed(2);
    if (isNaN(total)) total = 0;
    $("#total_price_amount1").val(total);
  }


  function updateArticle2() {
    var Animals = parseFloat($("#dare_price2").val());
    var total = (Animals) * 3.50;
    var total = total.toFixed(2);
    if (isNaN(total)) total = 0;
    $("#total_price_amount2").val(total);
  }


  function updateArticle3() {
    var Bedlinen = parseFloat($("#dare_price3").val());
    var total = (Bedlinen) * 8.50;
    var total = total.toFixed(2);
    if (isNaN(total)) total = 0;
    $("#total_price_amount3").val(total);
  }


  function updateArticle4() {
    var Towels = parseFloat($("#dare_price4").val());
    var total = (Towels) * 7.50;
    var total = total.toFixed(2);
    if (isNaN(total)) total = 0;
    $("#total_price_amount4").val(total);
  }


  function updateTotal() {
    var price1 = parseFloat($("#total_price_amount1").val());
    var price2 = parseFloat($("#total_price_amount2").val());
    var price3 = parseFloat($("#total_price_amount3").val());
    var price4 = parseFloat($("#total_price_amount4").val());
    var total = price1 + price2 + price3 + price4;
    if (isNaN(total)) total = 0;
    $("#totalSum").text(total);
  }

  $(document).on("change, keyup", "#dare_price1", updateArticle1);
  $(document).on("change, keyup", "#dare_price2", updateArticle2);
  $(document).on("change, keyup", "#dare_price3", updateArticle3);
  $(document).on("change, keyup", "#dare_price4", updateArticle4);
  $(document).on("click", "#getTotal", updateTotal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table>
  <tr>
    <td>Persons?</td>
    <td>
      <input class="span4 input-big" id="dare_price1" name="Persons" value="" size="30" type="text" />
    </td>
  </tr>
  <tr>
    <td>Animals?</td>
    <td>
      <input class="span4 input-big" id="dare_price2" name="Animals" value="" size="30" type="text" />
    </td>
  </tr>
  <tr>
    <td>Bedlinen?</td>
    <td>
      <input class="span4 input-big" id="dare_price3" name="Bedlinen" value="" size="30" type="text" />
    </td>
  </tr>
  <tr>
    <td>Towels?</td>
    <td>
      <input class="span4 input-big" id="dare_price4" name="Towels" value="" size="30" type="text" />
    </td>
  </tr>
</table>
<table style="width: 50%">
  <tr>
    <td style="width: 403px"></td>
    <td></td>
  </tr>
  <tr>
    <td style="width: 403px">Rentalprice</td>
    <td>189.00</td>
    <td>Euro</td>
  </tr>
  <tr>
    <td style="width: 403px">Taxes</td>
    <td style="width: 50px">
      <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount1" readonly="readonly" name="PricePersons" value="" />
    </td>
    <td>Euro</td>
  </tr>
  <tr>
    <td style="width: 403px"><span lang="nl">Animals</span>
    </td>
    <td>
      <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount2" readonly="readonly" name="PriceAnimals" value="" />
    </td>
    <td>Euro</td>
  </tr>
  <tr>
    <td style="width: 403px"><span lang="nl">Bedlinen</span>
    </td>
    <td>
      <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount3" readonly="readonly" name="PriceBedlinen" value="" />
    </td>
    <td>Euro</td>
  </tr>
  <tr>
    <td style="width: 403px"><span lang="nl">Towels</span>
    </td>
    <td>
      <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount4" readonly="readonly" name="PriceTowels" value="" />
    </td>
    <td>Euro</td>
  </tr>
  <tr>
    <td style="width: 403px">Total</td>
    <td id="totalSum">&nbsp;</td>
    <td>Euro</td>
  </tr>
</table>
<input id="getTotal" type="button" value="Get Total" />

只需使用一个函数replaceArticle1()替换4个函数replaceArticle2()，replaceArticle3()，replaceArticle4()，replaceArticle()并更新各个元素使用id s。

Answer 2

有updated fiddle

您需要在Rentalprice值中添加一个ID才能在脚本中使用它：

<td style="width: 403px">Rentalprice</td>
<td><span id="rental_price">189.00</span></td>

在每个输入字段的处理程序中，您最后应调用updateTotal()函数。

如果输入值不是数字，只需将''设置为值。

带有jquery函数的总表列

2 个答案: