-1

jquery コードでキャプチャする ID が配列である jquery/code に問題があります。

これがスニペットコードです。これが私のjqueryです。

<script type="text/JavaScript">
$(document).ready(function()
{
    $('input').keyup(function()
    {

        $('.total_fabi').each(function() {
        var answer = parseFloat($('.req').val()) * parseInt($('.was_perc').val());
            $('.total_fabi').html(answer);
        });

    });
});

これがhtml生成コードです。

<table align='center' width='100%' border='1'>
<thead style='background-color: #900; color: #FFF;'>
    <th>Description</th>
    <th>Estimated Cost</th>
    <th>Req'd Qty</th>
    <th>Wastage %</th>
    <th>Total</th>
</thead>
<tbody>
    <!-- This values are SQL generated inside While.. -->
    <!-- Values generated by sql are under Description, Estimated Cost, Wastage-->
    <!-- i Need to calculate the total using keyup by multiplying req'd qty * wastage% -->
    <tr bgcolor='#FFF'> 
        <td>FABRICATION PER LM</td>
        <td align='center'>200</td>
        <td align='center'><input type='text' size='3' name='req[]'  class='req'></td>
        <td align='center'><input type='hidden' name='was_perc[]' value='7' class='was_perc'>7</td>
        <td align='right'>
            <font color='#900'>
                <span id='total_fabi'>0</span>
                <input type='hidden' name='total_fabi' id='total_fabi' style='border: none;' size='6' readonly='readonly'>
            </font>
        </td>
    </tr>
    <tr bgcolor='#E3E4FA'>  
        <td>INSTALLATION PER LM</td>
        <td align='center'>200</td>
        <td align='center'><input type='text' size='3' name='req[]'  class='req'></td>
        <td align='center'><input type='hidden' name='was_perc[]' value='15' class='was_perc'>15</td>
        <td align='right'>
            <font color='#900'>
                <span class='total_fabi'>0</span>
                <input type='hidden' name='total_fabi' id='total_fabi' style='border: none;' size='6' readonly='readonly'>
            </font>
        </td>
    </tr>
    <!-- Here's the while Ends..--->
    <tr>
        <td colspan='4' align='right'>Total Fabrication & Installation</td>
        <td align='right'>
            <!-- This part where $total+=$total_fabi -->
        </td>
    </tr>   
</tbody>
</table>

これが実際の PHP コードです。

<table align='center' width='100%' border='1'>
                            <thead style='background-color: #900; color: #FFF;'>
                                <th>Description</th>
                                <th>Estimated Cost</th>
                                <th>Req'd Qty</th>
                                <th>Wastage %</th>
                                <th>Total</th>
                            </thead>
                            <tbody>
                                <?php
                                $total_non = 0;
                                $sel_fabi = mysql_query("SELECT * FROM tbllabor") or die (mysql_error());
                                while($non = mysql_fetch_array($sel_fabi)){
                                    $desc_fabi = $non['desc'];
                                    $est_cost = $non['est_cost'];
                                    $was_perc = $non['wastage_perc'];
                                    $was_perc = $was_perc * 100;
                                    //$total_fabi = $req * $was_perc;

                                echo "<tr bgcolor='".$colors[$c++ % 2]."'>";
                                echo "  <td>$desc_fabi</td>
                                        <td align='center'>$est_cost</td>
                                        <td align='center'><input type='text' size='3' name='req[]' class='req'></td>
                                        <td align='center'><input type='hidden' name='was_perc[]' value='$was_perc' class='was_perc'>$was_perc</td>
                                        <td align='right'>
                                            <font color='#900'>
                                            <span class='total_fabi'>0</span>
                                            <input type='hidden' name='total_fabi' id='total_fabi' style='border: none;' size='6' readonly='readonly'>
                                            </font>
                                        </td>";
                                echo "</tr>";
                                }
                                ?>
                                <tr>
                                    <td colspan='4' align='right'>Total Fabrication & Installation</td>
                                    <td align='right'>
                                        <input type='hidden' value='<?php echo $total_non;?>'>
                                        <?php echo $total_non;?>
                                    </td>
                                </tr>   
                            </tbody>
                        </table>

.each() 関数が機能しません。私が述べたこの種のコードで。必要な合計を計算するためにキーアップまたはキーダウンを使用する必要がある他のオプションはありますか..事前に感謝します..

4

2 に答える 2

2

id値はページ上で一意である必要があり、同じ要素を複数持つことはできませんid。それが根本的な問題です。

代わりにid値を値に変更できます。class

何をしようとしているのかを正確に伝えるのは難しいですが、または要素が変更さtotal_fabiれるたびに同じ行内の要素を更新することが目標である場合:reqwas_perc

$(document).ready(function()
{
    $('input').keyup(function()
    {
        // Find the row (if any) containing this input
        var $tr = $(this).closest("tr");

        // Find the .req, .was_perc, and .total_fabi elements *within* this row
        var $req = $tr.find(".req");
        var $was_perc = $tr.find(".was_perc");
        var $total_fabi = $tr.find(".total_fabi");

        // Do the update (probably better to use `text` than `html`)
        $total_fabi.text(parseFloat($req.val()) * parseInt($was_perc.val()));
    });
});

以下のコメントを再確認してください。

全体の合計に対して $total_fabi によって生成された計算された合計を取得するにはどうすればよいですか? PHPでは、$total += $total_fabi ..のように、jqueryでこれを行うにはどうすればよいですか?

あなたはそれを行うことができますeach：

var total = 0;
$(".total_fabi").each(function() {
    total += parseFloat($(this).text());
});
于 2013-09-12T06:32:21.867 に答える
0

まず、ID属性が必要でuniqueあり、同じ ID を何度も定義したことを知る必要があります。

属性classの代わりに使用できます。ID

于 2013-09-12T06:32:24.730 に答える