Jquery，计算具有相同类的html表行？

Question

我正在使用 grails 构建发票，并使用 jquery 进行动态计算。

我不知道，可能这不是一个好的解决方案，而且我不太适合 JavaScript。也许有人可以帮助我，我们开始吧:

<thead>
    <tr>
        <g:sortableColumn style="width: 20px" property="id" title="${message(code: 'packet.id.label', default: 'Id')}" />
        <g:sortableColumn style="width: 10px" property="anzahl" title="${message(code: 'packet.anzahl.label', default: 'Anzahl')}" />
        <th><g:message style="width: 250px" code="packet.artikel.label" default="   Artikel    " /></th>
        <th><g:message code="packet.artikel.label" default="   Steuer in %   " /></th>
        <th><g:message code="packet.artikel.label" default="   Preis pro Stück in €  " /></th>
        <th><g:message code="packet.artikel.label" default="   Preis Gesammt in € " /></th>
    </tr>
</thead>
<tbody>
    <g:each in="${packetInstanceList}" status="i" var="packetInstance">
        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
            <td><g:link controller="packet" action="show"  id="${packetInstance.id}">${fieldValue(bean: packetInstance, field: "id")}</g:link></td>
            <td><input name="q" class="st" type="text" style="background-color:transparent;border:0px solid white;" value="${fieldValue(bean: packetInstance, field: "anzahl")}" onclick="if (this.value=='Search') {this.value = '';}" readonly="true"/>
            <!--  ${fieldValue(bean: packetInstance, field: "anzahl")}    -->
            </td>
            <td nowrap>${fieldValue(bean: packetInstance, field: "artikel")}</td>

创建一个包含多行的 html

        <tr class="even">
            <td><a href="/test/packet/show/17">17</a></td>
            <td><input name="q" class="st" type="text" style="background-color:transparent;border:0px solid white;" value="1,222" onclick="if (this.value=='Search') {this.value = '';}" readonly="true"/>
                <!--  1,222    -->
            </td>
            <td nowrap> Blueray,Arthouse </td>
            <td> <input type="text" style="background-color:transparent;border:0px solid white;" class="input-steuer" value="19"/> </td>
            <td> <input type="text" style="background-color:transparent;border:0px solid white;" class="input-value"  /> </td>
            <td> <input type="text" style="background-color:transparent;border:0px solid white;" class="output-value" readonly />
            </td>
        </tr>
        <tr class="odd">
            <td><a href="/test/packet/show/18">18</a></td>
            <td><input name="q" class="st" type="text" style="background-color:transparent;border:0px solid white;" value="100" onclick="if (this.value=='Search') {this.value = '';}" readonly="true"/>
                <!--  100    -->
            </td>
            <td nowrap> Blueray,Arthouse </td>
            <td> <input type="text" style="background-color:transparent;border:0px solid white;" class="input-steuer" value="19"/> </td>
            <td> <input type="text" style="background-color:transparent;border:0px solid white;" class="input-value"  /> </td>
            <td> <input type="text" style="background-color:transparent;border:0px solid white;" class="output-value" readonly />
            </td>
        </tr>
            <td> <input type="text" style="background-color:transparent;border:0px solid white;" class="input-steuer" value="19"/> </td>
            <td> <input type="text" style="background-color:transparent;border:0px solid white;" class="input-value"  /> </td>
            <td> <input type="text" style="background-color:transparent;border:0px solid white;" class="output-value" readonly />
            </td>
        </tr>
    </g:each>

正如您所看到的，这些行具有相同的类。

这是 jquery 代码:

$(document).ready(function() {
    $(".input-value").keyup(function() {
        // var output = $(".output-value");
        var test = 0;

        $('.input-value').each(function() {
            var value = parseFloat($(this).val());
            var value3 = parseFloat($(".st").val());
            var value2 = parseFloat($(".input-steuer").val());

            //output.val(((value - value * value2/100)*value3).toFixed(2));
            score = ((value - value * value2/100)*value3);
            score = score.toFixed(2);
            //output.val(score);
            test+=score;
        });

        $(".output-value").val(test);
    });
});

这仅计算第一行而不是每一行，我想要每一行都有一个输出以及所有输出的总和，但我不习惯 javascript...

感觉很简单，但不适合我。

感谢您的宝贵时间

Answer 1

$(".input-value").keyup(function() {

    var value = parseFloat($(this).val());
    var value2;
    var value3;var temp=0;var temp1 = 0;
    $(this).parent().siblings().each(function() {
        if ($(this).children().hasClass('input-steuer')) {
            value2 = $(this).children().val();
        }
        if ($(this).children().hasClass('st')) {
            value3 = $(this).children().val();
        }
    });
    score = ((value - value * value2 / 100) * value3);
    $(this).parent().next('td').children('.output-value').val((score).toFixed(2));
    $('.output-value').each(function(){
        temp1 = $(this).val();        
        alert(temp1);
        if(temp1 == 'NaN' || temp1 == '') {
           temp1 = 0.0; 
        }
        temp = parseFloat(temp) + parseFloat(temp1); 
    });
    $('#wholesum').val(temp.toFixed(2));
});​

祝你有美好的一天!