1

ここでは、to[0] という名前の 1 つのフィールドが使用されています...しかし、実際には、クローンのために生成されているインデックス (to[1]、to[2] など) に +1 を付けて「N」回使用しています。 .. from[0] も同様です。from[0] は開始日、to[0] は終了日です。終了日が開始日より前にならないように、これら 2 つの日付を比較しています。ここでは、コードの最初の 2 つのブロックが適切に機能しています。それぞれが 1 つの行に対応しているためです。しかし、「N」行を作成しようとすると、機能しません。つまり、コードの最後のブロックが機能しません。

名前が動的に生成されるため、これらの要素を選択する方法がありません...

Jquery コードは次のとおりです。

    $(document).ready(function() {
                $("input[name='to[0]']").blur( function() {
                    if ($("input[name='to[0]']").val() != 'To' && $("input[name='from[0]']").val() != 'From') {
                        var a1 = $("input[name='from[0]']").val();
                        var b1 = $("input[name='to[0]']").val();
                        alert(b1);alert(a1);
                        if (a1 > b1) {
                                    alert("Invalid Date Range!\nStart Date cannot be after End Date!");
                        }
                    }
                });
                $("input[name='to[1]']").blur( function() {
                    if ($("input[name='to[1]']").val() != 'To' && $("input[name='from[1]']").val() != 'From') {
                        var a1 = $("input[name='from[1]']").val();
                        var b1 = $("input[name='to[1]']").val();
                        alert(b1);alert(a1);
                        if (a1 > b1) {
                                    alert("Invalid Date Range!\nStart Date cannot be after End Date!");
                        }
                    }
                });
                $("td.date").click( function() {
                    var n = $('#table2 tbody>tr').length - 2;
                    var r=2;
                    $("td.date>input:first").next().blur( function() {
                        while(r<n) {
                            if ($("input[name='to[r]']").val() != 'To' && $("input[name='from[r]']").val() != 'From') {
                                var a1 = $("input[name='from[r]']").val();
                                var b1 = $("input[name='to[r]']").val();
                                alert(b1);alert(a1);
                                if (a1 > b1) {
                                            alert("Invalid Date Range!\nStart Date cannot be after End Date!");
                                }
                            }
                            r++;
                        }
                    });
                });

HTMLは..

 <td width="15%" align="center" >
            <input class="f" style="width:70px" type="text" size="12" name="from[0]"  value="From" readonly="readonly"  />
            <a class="datepicker" href="#"><img alt="Pick a date" src="js/date.gif" border="0" width="17" height="16" /></a>
         </td>
         <td width="15%" align="center" >
            <input style="width:70px" class="f" type="text" size="12" name="to[0]" value="To" readonly="readonly" />
              <a class="datepicker" href="#"><img alt="Pick a date" src="js/date.gif" border="0" width="17" height="16" /></a>
         </td>

  <td width="15%" align="center" class="date" >
            <input style="width:70px" type="text" size="12" name="from[1]"  value="From" readonly="readonly"  />
            <a class="datepicker" href="#"><img alt="Pick a date" src="js/date.gif" border="0" width="17" height="16" /></a>
         </td>
         <td width="15%" align="center" class="date" >
            <input style="width:70px" class="f" type="text" size="12" name="to[1]" value="To" readonly="readonly" />
              <a class="datepicker" href="#"><img alt="Pick a date" src="js/date.gif" border="0" width="17" height="16"  /></a>
         </td>

from[1] および to[1] の td を含む最後の行が複製され、その後、最後の行が複製されます...

4

2 に答える 2

0

セレクターを変更するだけで、コードを複製する必要はありません。これを試して：

//^= means name starts with, so we are selecting all inputs with that matcher
$("input[name^='to['").blur( function() {
    //first we get the name in a variable (just for shortness)
    var thisName = $(this).prop("name");
    //we then get the numbered index, by splitting the id of the current item
    var index = thisName.substring(thisName.indexOf("[") + 1).replace("]", "");
    //based on the index, we now can get the corresponding "from" field
    var correspondingFromField = $("input[name='from[" + index + "]']");
    //now we just do your logic:
    if ($(this).val() != 'To' && correspondingFromField.val() != 'From') {
        var a1 = correspondingFromField.val();
        var b1 = $(this).val();
        alert(b1);alert(a1);
        if (a1 > b1) {
            alert("Invalid Date Range!\nStart Date cannot be after End Date!");
        }
    }
});
于 2012-05-18T12:03:17.583 に答える
0

カウンターをセレクターの一部として配置する必要がありますが、それをハードコーディングしていますr。これを試して：

while(r<n) {
    if ($('input[name="to\\[' + r + '\\]"]').val() != 'To' && $('input[name="from\\[' + r + '\\]"]').val() != 'From') {
        var a1 = $('input[name="from\\[' + r + '\\]"]').val();
        var b1 = $('input[name="to\\[' + r + '\\]"]').val();
        alert(b1);alert(a1);
        if (a1 > b1) {
            alert("Invalid Date Range!\nStart Date cannot be after End Date!");
        }
    }
    r++;
}
于 2012-05-18T11:53:58.763 に答える