Question

I am building an invoice with grails, and for dynamical calculation I am using jquery.

I don’t know, may be its not a good solution and I am not that fit in javascript. May be someone could help me, here we go:

<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>

that creates a html with many rows with

        <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>

As you can see these rows have same classes.

Here is jquery code:

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

This calculates only the first row and not each row,
I´d like to have a output for every row
and sum of the all outputs, but I am not used to javascript…

It feels like it is simple, but not for me.

Thanks for your time

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));
});​

Have a nice day!