Question

我的jquery / code中存在一个问题，即使用我的jquery代码捕获的id是一个数组。

这是代码段。这是我的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（）函数不能与我合作。我说过这种代码。你有任何其他选择，我应该使用keyup或keydown计算我需要的总数..提前谢谢..

Answer 1

id值must be unique on the page，您不能拥有多个具有相同id的元素。这是根本问题。

您可以改为将id值更改为class值。

很难准确说出您要尝试做什么，但如果目标是每次total_fabi或req元素更改时更新同一行中的was_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());
});

Answer 2

首先，您需要知道ID属性必须为unique并且您多次定义相同的ID。

您可以使用class代替ID属性。

如何使用jquery迭代更改onkeyup上的值？

2 个答案: