使用javascript從mysql自動計算具有數據的表行

Question

嗨，大家好，我這里有一個代碼，可以從mysql收集數據並在html表中顯示，這是php代碼：

<?Php
include("database_connection.php");
$query="select money
        from `money_denomination_t`
        ";
        $select_data_Result = mysqli_query($objconn, $query);
?>

這是HTMl代碼：

<table id="">
<thead>
<th>Money</th><th>x</th><th>Amount</th><th>=</th><th>Total</th>
<thead>
<?php 
$id = 0;
while($row=mysqli_fetch_array($select_data_Result))
{
    $id++;
?>
<tbody>
<tr>
<td>
<input type="text" name="money[]" value="<?php echo $row['money']; ?>" ></td>
<td>x</td>
<td><input type='text' name="amount[]"></td>
<td>=</td>
<td><input type='text' name="rowtotal[]"></td>
</tr>
</tbody>
<?php
}   
?>
<td></td><td></td><td></td><td></td><td><input type='text' name="total"></td>
</table>

我想做的就是獲取金錢和金額的乘積，並使用keyup javascript將其顯示在合計中，任何可以幫助我實現這一目標的人

我這里已經有了將rowtotal的所有值求和並在textbox total中顯示的代碼，它已經可以了，我只需要計算每一行的幫助即可在此處進行集成：

<script>
var totalperrow = document.getElementsByName("rowtotal[]");
var totalperrow_array = Array.prototype.slice.call(totalperrow);


for(var i=0; i < totalperrow_array.length; i++){
    totalperrow_array[i].addEventListener("keyup", sum_values);
}
function sum_values(){
    var sum = 0;
    for(var i=0; i < totalperrow_array.length; i++){
        sum += parseFloat(totalperrow_array[i].value);
    }
    if(!isNaN(sum))
    {
        document.getElementsByName("total")[0].value = sum;
        alert(sum);
    }
}
</script>

Answer 1

希望我能正確解釋這個問題-以下代碼使用for循環來模擬記錄集迭代並為每一行生成隨機金額。 javascript查找所有amount字段，並在這些字段上偵聽keyup事件。 keyup事件觸發該行總數的計算，這也將更新表底部的總計。 順便說一句，您的原始HTML無效-最后幾個td元素必須在表格行中！

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>keyup sum</title>
        <style>
            body,body *{box-sizing:border-box;font-family:calibri,verdana,arial;}
            input[type='text']{padding:0.5rem;}
        </style>
    </head>
    <body>

        <table id="">
            <thead>
                <th>Money</th>
                <th>x</th>
                <th>Amount</th>
                <th>=</th>
                <th>Total</th>
            <thead>
        <?php

        $id = 0;
        for( $i=0; $i < 5; $i++ ){

            $id++;

            $row['money']=mt_rand(5,250);

        ?>
            <tbody>
                <tr>
                    <td>
                        <input type="text" name="money[]" value="<?php echo $row['money']; ?>" >
                    </td>
                    <td>x</td>
                    <td>
                        <input type='text' name="amount[]">
                    </td>
                    <td>=</td>
                    <td>
                        <input type='text' name="rowtotal[]">
                    </td>
                </tr>
        <?php
        }   
        ?>
                <tr>
                    <td colspan=4 align='right'>Grand Total</td>
                    <td><input type='text' name="total"></td>
                </tr>
            </tbody>
        </table>


        <script>

            let total=document.querySelector('input[type="text"][name="total"]');



            const calculatetotal=function(){
                let sum=0;
                Array.prototype.slice.call( document.querySelectorAll( 'input[type="text"][name="rowtotal[]"]' ) ).forEach( field=>{
                    if( !isNaN( parseFloat( field.value ) ) )sum += parseFloat( field.value );
                });
                return sum;
            }



            Array.prototype.slice.call( document.querySelectorAll( 'input[type="text"][name="amount[]"]' ) ).forEach( input=>{
                input.addEventListener('keyup', function(e){
                    if( !isNaN( this.value ) ){
                        let money = this.parentNode.parentNode.querySelector('input[type="text"][name="money[]"]')
                        let result = this.parentNode.parentNode.querySelector('input[type="text"][name="rowtotal[]"]')
                        let product = this.value * money.value;

                        result.value=product;
                        total.value=calculatetotal();
                    }
                })
            })
        </script>


    </body>
</html>

為了計算行總數，上述代碼在搜索該行中的其他文本字段時，將活動輸入的父（表）行作為基礎。 使用querySelector可以非常具體地搜索您要搜索的內容- 可以在此處找到非常有用的參考

Answer 2

我想我明白你的問題。 我之前已經完成了計費軟件的相同項目。 這是我的js代碼以獲取總計。 希望對您有幫助。 這是html代碼：

    <input  type="text" name="Total[]" onkeyup="total()"  id="Total" readonly/>
    <input type="text" name="Grandtotal[]" id="GrandTotal"/>

這是jacascript代碼：

 <script>
   function total() {
          var inputs = document.getElementsByName('Total'),
              result = document.getElementById('GrandTotal'),
              sum = 0;            
          for(var i=0; i<inputs.length; i++) {
              var ip = inputs[i];
              if (ip.name && ip.name.indexOf("GrandTotal") < 0) {
                  sum += parseInt(ip.value) || 0;
              }
          }
          result.value = sum;
         }
</script>

使用javascript從mysql自動計算具有數據的表行

問題描述

2 個解決方案

解決方案1
0 2019-07-29 06:40:28

解決方案2
0 2019-07-29 07:49:37

使用javascript從mysql自動計算具有數據的表行

問題描述

2 個解決方案

解決方案1 0 2019-07-29 06:40:28

解決方案2 0 2019-07-29 07:49:37

解決方案1
0 2019-07-29 06:40:28

解決方案2
0 2019-07-29 07:49:37