Question

我有这段代码：

<script type="text/javascript">
    $("#run").click(function(){
        var prc = $('.hprc').html();
        var mval = '0.1';
        $('.vprc').html('$'+(prc * mval));
    });
</script>
<table id="form1" cellpadding="0" cellspacing="0" border="1">
        <tr>
            <td>
                <div class="col_label">Col1</div>
            </td>
            <td>
                <div class="col_label">col2</div>
            </td>
        <tr>
            <td>
                <input class='pos1' lid1='243' lid2='0' type='checkbox' /><label class='main_cb'>Name1</label>
            </td>
            <td>
                <div class='prc'><div class='hprc'>15.00</div>
                <div class='vprc'>$0</div></div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table width='100%' class='block1' cellpadding='0' cellspacing='0' border='1'>
                    <tr>
                        <td>
                            <input class='pos2' lid1='1' lid2='0' pval='1.00' type='checkbox' /><label class='sec_cb'>Name2</label>
                        </td>
                        <td>
                            <div class='prc'><div class='hprc'>1.00</div><div class='vprc'>$0</div></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class='pos3' lid1='0' lid2='2401' pval='22.00' type='checkbox' /><label class='sec_cb'>Name3</label>
                        </td>
                        <td>
                            <div class='prc'><div class='hprc'>22.00</div><div class='vprc'>$0</div></div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <input class='pos4' lid1='243' lid2='0' type='checkbox' /><label class='main_cb'>Name4</label>
            </td>
            <td>
                <div class='prc'><div class='hprc'>7.00</div><div class='vprc'>$0</div></div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table width='100%' class='block2' cellpadding='0' cellspacing='0' border='1'>
                    <tr>
                        <td>
                            <input class='pos5' lid1='193' lid2='0' pval='9.00' type='checkbox' /><label class='sec_cb'>Name5</label>
                        </td>
                        <td>
                            <div class='prc'><div class='hprc'>9.00</div><div class='vprc'>$0</div></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class='pos6' lid2='1737' lid1='0' pval='19.00' type='checkbox' /><label class='sec_cb'>Name6</label>
                        </td>
                        <td>
                            <div class='prc'><div class='hprc'>19.00</div><div class='vprc'>$0</div></div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <input type='button' value='calc' id='run'/>

该表是通过php生成的，它的连续计数可能会有所不同。

我正在尝试使用jquery在每行上计算类'hprc'*'0.1'的值。

它只计算第一行，然后复制其余的第一个结果。

修改表的结构或以不同方式命名类不是一种选择。

如何为每一行应用公式？

Answer 1

您可以使用

// for each item with class prc (the containers)
$('.prc').each(function(){
   var self = $(this),
       mval = 0.1,
       hprc = parseFloat(self.find('.hprc').text()), // get the value of the .hprc element and convert to float number
       vprc = self.find('.vprc');
   vprc.text('$' + (hprc*mval)); // store the result 
});

由于您正在处理价格，您还可以在计算后添加.toFixed(2)以舍入到2位小数位。

vprc.text('$' + (hprc*mval).toFixed(2));

演示 http://jsfiddle.net/gaby/uFjQc/

Answer 2

使用jQuery .each()函数，如：

var prc = null;

$('.hprc').each(function(){
   prc = $(this).html();
   .....
})

Answer 3

你可以这样做

$("#run").click(function() {
    $('.vprc').html(function() {
        return '$' + ($(this).prev('.hprc').text() * 0.1).toFixed(2);
    });
});

http://jsfiddle.net/7GSxS/

jquery计算具有相同类的不同元素中的不同值

3 个答案: