javascript - jquery函数的总表列

Question

我在这个网站上找到了一个用于更新表行的 jquery 函数。现在我需要该列的总计。有人吗？我不熟悉 jquery，尝试了很多东西，但没有成功。

fiddle :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" />

可以通过替换 4 个函数 replaceArticle1()、replaceArticle2()、replaceArticle3()、 进一步优化此代码仅使用单个函数 replaceArticle() 来替换Article4()，并使用其 id 更新相应的元素。