0

次の問題があります: 2 つの入力要素を持つテーブルがあります。それらの一方が他方よりも大きい場合、行全体が比較に応じて色付けされることになっています。これを onchange イベントでトリガーし、サイトの読み込み中に初めてトリガーします。手順は正常に機能しますが、onchange イベントは 4 回の変更のうち 1 回でのみトリガーされます。

テーブルステートメントは次のとおりです。

<div class="grid">
 <table id="table" class="tableRegion w100">
  <thead style="text-align:left">
   <tr>
    <fmt:bundle basename="res/web/ec_resources">
     <td class="tableHeader">
    ...
     </td> ...
    </fmt:bundle>
   </tr>
  </thead>      
  <tbody>
   <c:set var="i" value="0"/>
   <c:forEach var="participation" items="${someForm.list}">
     <tr id="participationRow${i}">

ここでは、テーブル > tr > td のコードを示します。

<td class="right bottom nowrap">
 <div>
  <c:out value="${someForm.event.currency.code}"/>
  <fmt:formatNumber maxFractionDigits="2" minFractionDigits="2" var="ovFee" value="${overallFee}" />
  <c:if test="${someForm.array[i].feeDebit != 0.0}">
   <spring:input class="right debit" path="array[${i}].feeDebit" maxlength="7" size="6" onchange="isPaid(${i});" />
  </c:if><c:if test="${someForm.array[i].feeDebit == 0.0}">
   <spring:input class="right debit" path="array[${i}].feeDebit" maxlength="7" size="6" onchange="isPaid(${i});" value="${ovFee}"/>
  </c:if>
 </div>
</td>

<td class="right bottom nowrap">
 <div class="padT5"><c:out value="${someForm.event.currency.code}"/> <spring:input class="right paid" path="array[${i}].feePaid" maxlength="7" size="6" onchange="isPaid(${i});"/></div>
</td>

呼び出されるスクリプトは次のとおりです。

$(document).ready(function(){
    $('#table > tbody > tr').each(function(i) {
        var paid = parseFloat($(this).find('input.paid').val());
        var debit = parseFloat($(this).find('input.debit').val());
        if (paid == debit)
            $('#participationRow'+i).addClass("green");
        else if (paid > debit)
            $('#participationRow'+i).addClass("yellow");
        }
    );
});

function isPaid(i){
    var paid = parseFloat($('#participationRow'+i).find('input.paid').val());
    var debit = parseFloat($('#participationRow'+i).find('input.debit').val());
    if (paid == debit)
        $('#participationRow'+i).addClass("green");
    else if (paid > debit)
        $('#participationRow'+i).addClass("yellow");

}

イベントがたまにしかトリガーされない理由は何ですか? jQueryとonclickでクロスチェックしました。それらはすべて、たまにしかトリガーされません。クリックして離れても、タブで離れても構いません。

4

3 に答える 3

1

これが実行されるはずのときに、コードにトリガーの定義がありません。

最初の部分 (.each()ブロック) は でのみ実行され$(document).ready();ます。つまり、ページの読み込みごとに 1 回実行されます (ドキュメントの読み込みが完了した直後)。

関数はisPaid()関数にすぎません。現在のコード スニペットには存在しないため、どこで呼び出されているかわかりません。

コード自体は問題ないように見えますが、トリガーの形式がまったくありません。

あなたは次のようなものを期待するでしょう:

$("input").change(function() {

    var the_row = $(this).parent().parent(); //finds the <tr> it belongs to.
    var i = the_row.attr("id").replace("participationRow","");

    isPaid(i);
});

これを改善する方法はありますが、これはコードに欠けている重要な鍵です。

于 2012-10-18T14:06:34.900 に答える
1 
    function highlightIfPaid(i){
        var paid = parseFloat($('#participationRow'+i).find('input.paid').val());
        var debit = parseFloat($('#participationRow'+i).find('input.debit').val());
        if (paid == debit)
            $('#participationRow'+i).addClass("green");
        else if (paid > debit)
            $('#participationRow'+i).addClass("yellow");
    }

    $(document).ready(function(){
        //just use jquery for binding to change event,
        //my guess is that Spring doesn't have a value for i at the point and jquery is not loaded by then so $ is undefined
        $('input.debit').change(function(){
            //you need to get the index i based on your table structure
            //I assumed this is just the index of the row
            //I get this method from this other post http://stackoverflow.com/questions/1620391/find-table-row-index-using-jquery
            var i = $(this).closest('tr').prevAll().length;
            highlightIfPaid(i);
        });

//Dry: highlight your rows on first load
$('#table > tbody > tr').each(highlightIfPaid);
    });
于 2012-10-19T08:39:22.260 に答える
0

わかりました...しばらく見て、@kabaros und @Flaterの助けを借りて、次のものが見つかりました。

$(document).ready(function(){
 $('input.paid').change(function(){
  var i = $(this).closest('tr')[0].sectionRowIndex;
  isPaid(i);
 });

解決策は$('input.paid')、 ではなく、トリガーされた でした$('input')。また、行のカウントもそれほど簡単ではありませんでしたが、上記のコードは行を正しくカウントしています。残念ながら、フィールドonchange内はinputたまにしかトリガーされません!

于 2012-10-19T09:22:29.403 に答える