堆栈内存溢出
  繁体   English   中英

我似乎无法让我的第一行小计显示在总计中

[英]I can't seem to get my first row of sub total to display on the grand total

 原文  2021-06-15 14:23:55  7   1    javascript/ html/ css

问题描述

因此，当按下按钮时，我试图使一行的小计显示在总计输入上，但我必须填写整行，它才会显示总计。

我想要它，这样当我输入第一行并单击按钮时，它将显示第一行的总金额，如果我在第二行添加金额并再次单击按钮，它仍将应用 function。 因为我现在遇到了麻烦，所以当我添加所有金额时，它只会显示总值。

因为我的一些 JavaScript 不合适所以我附上了它的截图。

HTML：

    <body>
<head>
  <h1><strong> Book Ordering System </strong></h1>



 <table>
        <thead>
          <tr>
        <th> No.</td>
         <th>Book Title</th>
         <th>Author</th>
         <th>Catagory</th>
         <th>Unit Price</th>
             <th>Quantity</th>
             <th>Total</th>
          </tr>
        </thead>
<tbody>
  <!---------------- ROW 1 ------------------>
  <tr class="hover">
    <td>1</td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <select name="type">
        <option value="Choose" selected>Choose a Category...</option>
        <option value="Business">Business</option>
        <option value="Fiction">Fiction</option>
        <option value="Mathematics">Mathematics</option>
        <option value="Technology">Technology</option>
      </select>
    </td>

    <td>
      <input type="number" name="unit price" placeholder="0.00" id="book1_price1" >
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="book1_quan1" >
    </td>

    <td>
      <input
        required
        type="number"
        name="total"
        value="0.00"
        readonly="readonly"
        id="book1_total"
      />
    </td>
  </tr>

  <!---------------- ROW 2 ------------------>

  <tr class="hover">
    <td>2</td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <select name="type">
        <option value="Choose" selected>Choose a Category...</option>
        <option value="Business">Business</option>
        <option value="Fiction">Fiction</option>
        <option value="Mathematics">Mathematics</option>
        <option value="Technology">Technology</option>
      </select>
    </td>

    <td>
      <input type="number" name="unit price" placeholder="0.00" id="book2_price1" >
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="book2_quan1">
    </td>

    <td>
      <input
        required
        type="number"
        name="total"
        value="0.00"
        readonly="readonly"
        id = "book2_total"
      />
    </td>
  </tr>

  <!---------------- ROW 3 ------------------>

  <tr class="hover">
    <td>3</td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <select name="type">
        <option value="Choose">Choose a Category...</option>
        <option value="Business">Business</option>
        <option value="Fiction">Fiction</option>
        <option value="Mathematics">Mathematics</option>
        <option value="Technology">Technology</option>
      </select>
    </td>

    <td>
      <input type="number" name="unit price" placeholder="0.00" id="book3_price1">
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="book3_quan1" >
    </td>

    <td>
      <input
        required
        type="number"
        name="total"
        value="0.00"
        readonly="readonly"
        id="book3_total"
      />
    </td>
  </tr>

  <!---------------- ROW 4 ------------------>

  <tr class="hover">
    <td>4</td>
    <td>
      <input type="text" />
    </td>
    <td>
      <input type="text" />
    </td>
    <td>
      <select name="type">
        <option value="Choose">Choose a Category...</option>
        <option value="Business">Business</option>
        <option value="Fiction">Fiction</option>
        <option value="Mathematics">Mathematics</option>
        <option value="Technology">Technology</option>
      </select>
    </td>

    <td>
      <input type="number" name="unit price" placeholder="0.00" id="book4_price1">
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="book4_quan1">
    </td>

    <td>
      <input
        required
        type="number"
        name="total"
        value="0.00"
        readonly="readonly"
        id="book4_total"
      />
    </td>
  </tr>

  <!---------------- ROW 5 ------------------>

  <tr class="hover">
    <td>5</td>
    <td>
      <input type="text" />
    </td>
    <td>
      <input type="text" />
    </td>
    <td>
      <select name="type">
        <option value="Choose">Choose a Category...</option>
        <option value="Business">Business</option>
        <option value="Fiction">Fiction</option>
        <option value="Mathematics">Mathematics</option>
        <option value="Technology">Technology</option>
      </select>
    </td>

    <td>
      <input type="number" name="unit price" placeholder="0.00" id="book5_price1" >
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="book5_quan1" >
    </td>

    <td>
      <input
        required
        type="number"
        name="total"
        value="0.00"
        readonly="readonly"
        id="book5_total"
      />
    </td>
  </tr>
</tbody>

<tfoot>
  <!------------ Last Row ------------------->
  <tr>
    <td colspan="5">
      
      <input type="button" value="Calculate Grand Total Price" onclick="calculateTotal();">
       
    </td>

    <td colspan="2">
      <input
        type="number"
        name="total_final"
        id="total_final"
        value="0.00"
        style="font-size: 18px; background-color: silver"
        readonly="readonly"
      />
    </td>
  </tr>
</tfoot>

我的 JavaScript：

<script>
  function calculateTotal() {

   let Book1_fulltotal = 0

   const NumberOfBooks = 5;

for (let i = 1; i <= NumberOfBooks; ++i) {

let BookTotal = parseFloat(document.getElementById("book" + i + "_price1").value) * parseFloat(document.getElementById("book" + i + "_quan1").value);
document.getElementById("book" + i + "_total").value = BookTotal.toFixed(2); 

Book1_fulltotal += parseFloat(document.getElementById("book" + i + "_total").value);
}

const new_avg = Book1_fulltotal 
document.getElementById("total_final").value = new_avg.toFixed(2)
}
      for (let i = 1; i <= 5; ++i) {
        document.getElementById("book" + i + "_price1").value = (0).toFixed(2);
        document.getElementById("book" + i + "_quan1").value = (0).toFixed(2);
        document.getElementById("book" + i + "_total").value = (0).toFixed(2);
}
    </script>

1 个解决方案

解决方案1
 0  2021-06-15 14:36:11

您的 HTML 中有一些语法错误。 在我修复它之后，你的 js function 运行良好。 

 function calculateTotal() { let Book1_fulltotal = 0; const NumberOfBooks = 5; for (let i = 1; i <= NumberOfBooks; ++i) { let BookTotal = parseFloat(document.getElementById("book" + i + "_price1").value) * parseFloat(document.getElementById("book" + i + "_quan1").value); document.getElementById("book" + i + "_total").value = BookTotal.toFixed(2); Book1_fulltotal += parseFloat( document.getElementById("book" + i + "_total").value ); } const new_avg = Book1_fulltotal; document.getElementById("total_final").value = new_avg.toFixed(2); } for (let i = 1; i <= 5; ++i) { document.getElementById("book" + i + "_price1").value = (0).toFixed(2); document.getElementById("book" + i + "_quan1").value = (0).toFixed(2); document.getElementById("book" + i + "_total").value = (0).toFixed(2); }
 <body> <h1><strong> Book Ordering System </strong></h1> <table> <thead> <tr> <th>No.</th> <th>Book Title</th> <th>Author</th> <th>Catagory</th> <th>Unit Price</th> <th>Quantity</th> <th>Total</th> </tr> </thead> <tbody> <.---------------- ROW 1 ------------------> <tr class="hover"> <td>1</td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> <td> <select name="type"> <option value="Choose" selected>Choose a Category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td> <input type="number" name="unit price" placeholder="0.00" id="book1_price1" /> </td> <td> <input type="number" name="Quality" placeholder="0" id="book1_quan1" /> </td> <td> <input required type="number" name="total" value="0.00" readonly="readonly" id="book1_total" /> </td> </tr> <.---------------- ROW 2 ------------------> <tr class="hover"> <td>2</td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> <td> <select name="type"> <option value="Choose" selected>Choose a Category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td> <input type="number" name="unit price" placeholder="0.00" id="book2_price1" /> </td> <td> <input type="number" name="Quality" placeholder="0" id="book2_quan1" /> </td> <td> <input required type="number" name="total" value="0.00" readonly="readonly" id="book2_total" /> </td> </tr> <.---------------- ROW 3 ------------------> <tr class="hover"> <td>3</td> <td> <input type="number" /> </td> <td> <input type="number" /> </td> <td> <select name="type"> <option value="Choose">Choose a Category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td> <input type="number" name="unit price" placeholder="0.00" id="book3_price1" /> </td> <td> <input type="number" name="Quality" placeholder="0" id="book3_quan1" /> </td> <td> <input required type="number" name="total" value="0.00" readonly="readonly" id="book3_total" /> </td> </tr> <.---------------- ROW 4 ------------------> <tr class="hover"> <td>4</td> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td> <select name="type"> <option value="Choose">Choose a Category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td> <input type="number" name="unit price" placeholder="0.00" id="book4_price1" /> </td> <td> <input type="number" name="Quality" placeholder="0" id="book4_quan1" /> </td> <td> <input required type="number" name="total" value="0.00" readonly="readonly" id="book4_total" /> </td> </tr> <.---------------- ROW 5 ------------------> <tr class="hover"> <td>5</td> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td> <select name="type"> <option value="Choose">Choose a Category;.:</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td> <input type="number" name="unit price" placeholder="0;00" id="book5_price1" /> </td> <td> <input type="number" name="Quality" placeholder="0" id="book5_quan1" /> </td> <td> <input required type="number" name="total" value="0:00" readonly="readonly" id="book5_total" /> </td> </tr> </tbody> <tfoot> <!------------ Last Row -------------------> <tr> <td colspan="5"> <input type="button" value="Calculate Grand Total Price" onclick="calculateTotal();" /> </td> <td colspan="2"> <input type="number" name="total_final" id="total_final" value="0.00" style="font-size: 18px; background-color: silver" readonly="readonly" /> </td> </tr> </tfoot> </table> </body>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何从行总计中获取总计 查找小计和总计 我需要从总计中计算总计， 对 Javascript 非常陌生。 似乎无法让 1 个函数在我的代码中工作（berekenBedrag）。 需要计算总数 使用jquery获取每行总计和表的总计 得到两个表的总数 使用jQuery计算GridView中的行总数和总计 无法在Ajax计算表格中获得总计 从表输入中获取总数作为jquery中的总计 使用Jquery获取Total的文本框的总计
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM