onkeyup事件計算除了第一個

-------------------------------------------------- 
    |No|Style No|Item Desc|Qty|Unit Price|Total Price| 
    -------------------------------------------------- 
    |1 |Style 1 |Item 1 |44 |3.00  |132.00  | 
    |2 |Style 2 |Item 2 |3 |3.00  |9.00  | 
    |3 |Style 3 |Item 3 |23 |34.00  |782.00  | 
    |4 |Style 4 |Item 4 |56 |78.00  |4368.00 | 
    |5 |Style 5 |Item 5 |34 |58.00  |1972.00 | 
    -------------------------------------------------- 
    (Submit button) 
    GRAND TOTAL: RM[_________ textbox] (Calculate Total button)

備選地是這樣的屏幕顯示圖像： http://img715.imageshack.us/img715/8885/calcs.jpg onkeyup事件計算除了第一個

您好，我有這個表與來自PHP腳本產生的形式基於數據庫中的表。我一直在拉我的頭髮，想出如何在第一個之後創建下面的行，以使用javascript處理onkeyup事件。第一行（在紅色方框中）作爲上面的截圖鏈接，似乎很好，例如，如果我將第一行中的「數量」的值更改爲「1」，它將自動計算併產生「Total價格「改爲」3.00「，但不在以下行中，只要我插入一個新值，它什麼都不做。奇怪的是，它計算每行，包括在「總計」文本框中，當我點擊「計算總計」按鈕

我似乎無法弄清楚問題是什麼以及如何解決它。任何幫助將不勝感激。

下面是源代碼：

function calc(idx) { 
     var price = parseFloat(document.getElementById("cost"+idx).value)* 
        parseFloat(document.getElementById("qty"+idx).value); 
     // alert(idx+":"+price); 
     document.getElementById("price"+idx).value= isNaN(price)?"0.00":price.toFixed(2); 
    } 

    function totalIt() { 
     var qtys = document.getElementsByName("qty[]"); 
     var total=0; 
     for (var i=1;i<=qtys.length;i++) { 
     calc(i); 
     var price = parseFloat(document.getElementById("price"+i).value); 
     total += isNaN(price)?0:price; 
     } 
     document.getElementById("total").value=isNaN(total)?"0.00":total.toFixed(2)      
    }  

    window.onload=function() { 
     document.getElementsByName("qty[]")[0].onkeyup=function() {calc(1)}; 
     document.getElementsByName("cost[]")[0].onkeyup=function() {calc(1)}; 
    } 
    </script> 
    </head> 

    <body> 
    <?php 
    $sql = "SELECT * FROM transaction_item"; 
    $result = mysql_query($sql,$rfps) or die($sql."<br/><br/>".mysql_error()); 

    //start a table 
    echo '<form name="form1" method="post" action=""> 
    <table width="350px" border="1" style="border-collapse:collapse;">'; 

    //start header of table 
    echo '<tr> 
    <th id="datatable" > <div align="center">No</div></th> 
    <th style="display:none;"><div align="center">Trans<br />Item<br />ID</div></th> 
    <th style="display:none;"><div align="center">Trans<br />Info<br />ID</div></th> 
    <th><div align="center">Style<br />No</div></th> 
    <th><div align="center">Item<br />Desc</div></th> 
    <th><div align="center">Qty</div></th> 
    <th><div align="center">Unit<br />Price</div></th> 
    <th formula="cost*qty"summary="sum"><div align="center">Total<br />Price</div></th> 
    </tr>'; 

    //loop through all results 
    $i=1; 
    while($r=mysql_fetch_object($result)){ 

    //print out table contents and add id into an array and email into an array 
    echo '<tr> 
    <td id="datatable"> <div align="center">'.$i.'</div></td> 
    <td style="display:none;"><div align="center">'.$r->trans_item_id.'</div></td> 
    <td style="display:none;"><div align="center">'.$r->trans_info_id.'</div></td> 
    <td><div align="center"><input type="text" id="style'.$i.'" name="style[]" value="'.$r->style_no.'" size="10" /></div></td> 
    <td><div align="center"><input type="text" id="item'.$i.'" name="item[]" value="'.$r->item_desc.'" size="25" /></div></td> 
    <td><div align="center"><input type="text" id="qty'.$i.'" name="qty[]" value="'.$r->qty.'" size="2" /></div></td> 
    <td><div align="center"><input type="text" id="cost'.$i.'" name="cost[]" value="'.$r->unit_price.'" size="5" /></div></td> 
    <td><div align="center"><input type="text" id="price'.$i.'" name="price[]" value="'.$r->total_price.'" size="6" /></div></td> 
    </tr>'; 
    ++$i; 
    } 

    //submit the form 
    echo'</table> 
    <input type="submit" name="Submit" value="Submit"> 
    <p><strong>GRAND TOTAL: RM</strong> 
    <input type="text" readonly="readonly" id="total" /> 
    <input type="button" value="Calculate Total" onclick="totalIt()" /></p> 
    </form>'; 
    ?> 
    </body> 
    </html>

來源

2012-07-22 Shukri

好，在快速瀏覽，問題是，你只抓住了第一個qty[]元件和第一cost[]元素，添加聽衆。

看一看JavaScript代碼的最後一位，還有 - 在window.onload = function(){...部分：

window.onload=function() { 
    document.getElementsByName("qty[]")[0].onkeyup=function() {calc(1)}; 
    document.getElementsByName("cost[]")[0].onkeyup=function() {calc(1)}; 
}

這是偉大的，但它意味着你只抓住每一個的第一個框，並在發送「 qty1「和」cost1「數據。

試試這個，而是：

window.onload = function() { 
    var qtyArr = document.getElementsByName("qty[]"), 
     costArr = document.getElementsByName("cost[]"), 
     length = qtyArr.length, 
     i = 0, func = null; 

    for (; i < length; i++) { 
     func = (function (i) { return function() { calc(i + 1); }; }(i)); 
     qtyArr[i].onkeyup = func; 
     costArr[i].onkeyup = func; 
    } 
};

這樣做可能是使用事件代表團的更合適的方式：

聽onkeyup在包含這些行整個表。
如果是這樣（使用onkeyup）編輯的元素是您要使用的元素：

如果（event.target.name === 「數量[]」 || event.target.name == = 「成本[]」）{...}
消防calc像這樣：

calc(event.target.id.replace("qty","").replace("cost",""));

首先應的方式正常工作，如果你想有一個快速的d-dirty解決方案。

來源

2012-07-22 05:46:34 Norguard

它的工作！所以這就是爲什麼它只能在第一行計算的原因。目前，我只是堅持快速和骯髒的解決方案，因爲事件代表團對我來說是一種新鮮事物，因爲我剛剛聽到這個消息時告訴我，我會更多地關注它。非常感謝您提供精彩的解決方案和建議。 =） – Shukri 2012-07-22 06:32:16

onkeyup事件計算除了第一個

回答

相關問題