0

このコードでは、javascript 関数は from[1] を displayDatePicker('from[1]', false, 'dmy', '-') の引数として取っています。jquery を使用してこの (2 番目の) 行を複製すると、すべての入力名と選択名がインクリメントされますが、javascript 関数はまだ from[1] を引数として取っています。これを [1] から [2] に変更する方法などを知りたい

<tr>
         <td width="19%" align="right" ><input type="text" id="roomcat" name="roomcat[1]" value="Deluxe" /></td>
         <td width="1%" align="center" >&nbsp;</td>
         <td width="15%" align="left" ><select class="f" name="roomtype[1]" id="roomtype">
            <option value="">Please Select</option>
            <option value="Single">Single</option>
            <option value="Double">Double</option>
            <option value="Triple">Triple</option>
            <option value="Extra">Extra</option>
         </select></td>
         <td width="7%" align="left" ><input type="text" id="cfit" name="cfit[1]" /></td>
         <td width="8%" align="left" ><input type="text" id="cgit" name="cgit[1]" /></td>
         <td width="7%" align="center" ><input type="text" id="rfit" name="rfit[1]" /></td>
         <td width="8%" align="center" ><input type="text" id="rgit" name="rgit[1]" /></td>
         <td width="10%" align="center" >
            <input class="f" style="width:70px" type="text" size="12" name="from[1]" id="from" value="<?php if($mode==1)
            {
            echo $from;
            }
            else
            {
            echo "From";
            }?>" readonly="readonly"  />
            <a href="javascript:displayDatePicker('from[1]', false, 'dmy', '-')"><i.m.g alt="Pick a date" src="js/date.g.i.f" border="0" width="17" height="16" /></a>
         </td>
         <td width="10%" align="center" >
            <input style="width:70px" class="f" type="text" size="12" name="to[1]" id="to" value="<?php if($mode==1)
              {
              echo $to;
              }
              else
              {
              echo "To";
              }?>" readonly="readonly" />
              <a href="javascript:displayDatePicker('to[1]', false, 'dmy', '-')"><i.m.g alt="Pick a date" src="js/date.g.i.f" border="0" width="17" height="16"  /></a>
         </td>
         <td width="15%" align="left" >&nbsp;</td>
       </tr>

Jqueryコードは

    $(document).ready(function() {
    $("#addrow").click(function() {
      var row = $('#table2 tbody>tr:last').clone(true);
        row.find("input:text").each(function(){
    this.name = this.name.replace(/\[(\d+)\]$/, function(str,p1){
            return '[' + (parseInt(p1,10)+1) + ']';
        });
        })
    row.find("select").each(function(){
    this.name = this.name.replace(/\[(\d+)\]$/, function(str,p1){
            return '[' + (parseInt(p1,10)+1) + ']';
        });
        })
      row.insertAfter('#table2 tbody>tr:last');
      return false;
    });
  });
4

2 に答える 2

1

idあなたの s に属性をドロップしてください。<input>それらは必要ありません。重複したids があると、無効な HTML と奇妙な問題が発生するだけです。それらをスタイリングに使用している場合は、代わりにクラスを使用してください。他の目的でそれらが必要な場合は、コピーするときにそれらを修正して、ids が重複しないようにする必要があります。

これで、クローン作成を少しクリーンアップできます。行のクローンを作成する場合、括弧内の数値を解析する必要はありません。テーブルに行数を問い合わせて、新しい数値を取得するために 1 つ追加するだけです。

var n = $('#table2 tbody>tr').length + 1;

あなたのreplace呼び出しはこれに単純化されます：

this.name.replace(/\[(\d+)\]$/, '[' + n + ']');

また、複数セレクター<input>を使用して、とを<select>同時に反復処理することもできます。

row.find('input:text, select').each(...)

どちらの場合も同じ属性を変更しているので、2 つの同一のループは必要ありません。

javascript:displayDatePicker(...)あなたの中で使用する<a>必要はありません。<a>jQuery を使用して、クラスを追加することにより、これらの のクリックにバインドできます。

<a class="datepicker">...</a>

次に、コールバック内で/の組み合わせを使用clickしてそれらにコールバックをバインドすると、対応するものを見つけることができます:closestfind<input>

$('a.datepicker').click(function() {
    var $input = $(this).closest('td').find('input[type=text]');
    displayDatePicker($input.attr('name'), false, 'dmy', '-'));
});

を使用しているため、複製された要素のイベント ハンドラーがコピーされるため、またはの動的バージョンcloneをいじる必要はありません。delegateon

簡略化された HTML を使用したデモを次に示します: http://jsfiddle.net/ambiguous/yEaw6/

于 2012-05-03T17:25:54.693 に答える
0

あなたの質問の最初の段落から私が理解したことから..

これは役に立ちますか？

var cells = $('td');  //Select row/cells here

$.each(cells, function(index, cell){
  //index corresponds to index of current cell in set of matched cells  
});
于 2012-05-04T05:50:53.347 に答える