0 
    --------------------------------------------------
    |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

こんにちは、データベース内のテーブルに基づいてphpスクリプトから生成されたフォームを含むこのテーブルがあります。最初の行の後に次の行を作成して、javascript を使用して onkeyup イベントを処理する方法を考え出しました。上記のスクリーンショット リンクの最初の行 (赤い四角のボックス内) は、たとえば、最初の行の "Qty" の値を "1" に変更すると、自動的に計算され、"Total Price」を「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>
4

1 に答える 1

0

一見すると、問題は、リスナーを追加するために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;
    }
};

これを行うより適切な方法は、イベント委任を使用することです。

  1. onkeyupこれらの行を含むテーブル全体でリッスンします。

  2. ( を使用して) 編集された要素がonkeyup使用する要素である場合:

    if (event.target.name === "qty[]" || event.target.name === "cost[]") {...}

  3. calc次のように発火します。

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

迅速で汚い解決策が必要な場合は、最初の方法で問題なく動作するはずです。

于 2012-07-22T05:46:34.513 に答える