如何使用 jquery 在 keyup 上迭代更改值

How to iterate changing values onkeyup using jquery?

本文关键字：迭代 keyup 何使用 jquery      更新时间：2023-09-26

我的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（） 函数对我不起作用。 对于我所说的这种代码。 您是否还有其他选项，我应该使用键上或键下来计算我需要的总数..提前谢谢..

id值在页面上必须是唯一的，您不能有多个具有相同id的元素。这是根本问题。

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

很难确切地说出您要做什么，但是如果目标是在每次req或was_perc元素更改时更新同一行中的total_fabi元素：

$(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());
});

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

您可以使用class而不是ID属性。

相关文章：