在两种不同类型的元素中显示函数的结果

时间:2011-06-22 23:02:18

标签: jquery

我正在使用此函数来计算列中所有值的总和。我希望结果显示在输入框以及它当前所执行的单元格中。我只是稍微坚持混合两者的语法,因为需要引用一个值。

JQuery的

$(document).ready(function(){
$('#front_finish, #back_finish').change(function(){
    function tally (selector) {
        $(selector).each(function () {
            var total = 0,
                column = $(this).siblings(selector).andSelf().index(this);
            $(this).parents().prevUntil(':has(' + selector + ')').each(function () {
                total += parseFloat($('td.sum:eq(' + column + ')', this).html()) || 0;
            })
            $(this).html(total);
        });
    }
    tally('td.total');
    });
});

输入

<input type="text" name="glass_total" id="glass_total" value="0" />

<table id="data">
<tr>
    <th>Finish</th>
    <th>Pattern</th>
    <th>Price</th>
</tr>
<tr>
    <td>Front Finish:</td>
    <td><span id="front_finish_name">Mirror</span></td>
    <td class="sum" id="front_finish_price">15</td>
</tr>
<tr>
    <td>Front Pattern:</td>
    <td><span id="front_pattern_name"></span></td>
    <td class="sum" id="front_pattern_price"></td>
</tr>
<tr>
    <td>Back Finish:</td>
    <td><span id="back_finish_name">Mirror</span></td>
    <td class="sum" id="back_finish_price">15</td>
</tr>
<tr>
    <td>Back Pattern:</td>
    <td><span id="back_pattern_name"></span></td>
    <td class="sum" id="back_pattern_price"></td>
</tr>
<tr>
    <th colspan="2" align="right">Total</th>
    <td class="total"></td>
</tr>

2 个答案:

答案 0 :(得分:1)

我对每个人感到有点困惑,因为你发布的html只有一个td.total。如果真的只有一个那么你需要做的就是:

$("#glass_total").val(total);

如果有多个,你需要解释一下,因为输入似乎是唯一的。

答案 1 :(得分:1)

我认为你的jquery可能有点偏差。试试这个:

$(document).ready(function () {
    $('#front_finish, #back_finish').change(function () {
        var total = 0, temp;
        $("#data td.sum").each(function () {
            temp = $(this).html();
            if (!temp) {
                return;
            }
            temp = parseFloat(temp);
            if (isNaN(temp)) {
                return;
            }
            total += temp;
        });
        $("#data td.total").html(total);
        $("#glass_total").val(total); // if you want it in the textbox
    });
});