打印总计答案

【问题标题】：Print The Grand Total打印总计
【发布时间】：2021-12-24 05:28:53
【问题描述】：

一旦用户输入一个商品的数量并点击提交，这个计算器应该打印该商品的小计（数量 * 单价）和总计（小计行的总和）。

请有人帮我用 JS 函数写这个 jquery..

        body{
            font-family:Consolas;  
        } 

        table{
            border:1px solid blue; 
            padding-left:3px;
        }
        
        #submit{
            background-color:green;
            padding-left:20px           
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="font-size:30px;color:red;text-align:left;word-spacing:100px;">ABC Supermarket</h1>
    
    <table border-collapse="collapse" >
    
    
        <tr>
            <th>Item</th>
            <th>Unit Price</th>
            <th class="q">Quantity</th>
            <th>Subtotal</th> 
        </tr>

        <tr>
            <td>Bread</td>
            <td><input type="text" id="u1" value="120.00" readonly="readonly" onclick="reSum();"></td>
            <td><input type="text" id="q1" onclick="reSum();"></td>
            <td><input type="text" id="s1" readonly="readonly"></td>            
        </tr>   

        

        <tr>
            <td>Grandtotal</td> 
            <td></td>
            <td></td>
            <td><input type="text" id="tot" readonly="readonly"></td>
        </tr>      
    
        <tr>
            <td></td>
            <td></td>
            <td><input type="button" value="clear" id="clear"></td>
            <td><input type="button" id="submit" value="Submit" ></td>          
        </tr> 
      
    </table>

下面是我编写的用于替换 jquery 的 JavaScript 函数。

<script>
       function subTotal(u1,q1){
         var u1=document.getElementById("u1").value;
         var q1=document.getElementById("q1").value;
         var subTotal=u1*q1;
         var grandTotal= subTotal;
         document.getElementById("s1").innerHTML=subTotal;
         document.getElementById("tot").innerHTML=grandTotal;
       }
</script>



<script>
      
    function clear(){
    document.getElementById("q1").value="";
    document.getElementById("s1").value="";
    document.getElementById("tot").value="";
    }     

</script>

【问题讨论】：

你试过什么？您的解决方案有什么问题？
你的意思是你需要将jQuery“转换”为vanila、plain、javascript？
请澄清您的问题。并提供 codepen 或 jsfiddle 的链接。
这里我放了 jqueries 提交按钮来计算小计和总计。并且还可以通过清除按钮来清除所有数据。我想用没有jquery的java脚本函数替换这个函数..
Codepen - codepen.io/Anna_L8/pen/XWaPZRW

标签： javascript html jquery css html-table

【解决方案1】：

HTML 代码

   <td><input type="number" class="qty" value="" name="qty" id="qty" style="border: 1px solid lightgray;width: 100%;  padding: 6px;
    border-radius: 5px;"></td>
     <td><input class="price" type="number" id="price" name="price"  style="border: 1px solid lightgray;width: 100%;  padding: 6px;
    border-radius: 5px;" ></td>
    <td><input  class="total" type="number" name="total" id="total" style=";width: 100%; padding: 6px;
    border-radius: 5px; border:none ;font-size: 27px " ></td>

脚本

 $(document).on('keyup', '.qty', function (){
        let Ele = $(this);
        let qtyEle = Ele.parent().parent().find('.price');
        let totalEle = Ele.parent().parent().find('.total');
        totalEle.val(qtyEle.val() * Ele.val());
    });

【讨论】：