私は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に慣れていません...
シンプルな感じですが、私には合いません。
御時間ありがとうございます