2011-12-21 17 views
3

各セルのデータを文字列に置き換えて、テーブルの列全体をフォーマットしようとしています。単純に、入力フィールドに「nargles」と入力し、表の列の上部にある書式ボタンをクリックすると、その列の各セルのテキストが「nargles」に置き換えられます。これはうまくいきます。jQuery stringマッチした正規表現を置換

私の質問では、入力文字列内の "%0"、 "%1"、 "%2"などのインスタンスをテーブル値に置き換えています。 %0は第0列に対応し、第1列は%1、第2列は%2などです。さらに、現在変更されている行の列値を取得する必要があります。例で明確にする

は、テーブルを取ることができます:私は私の入力のための「0%1のためである行%」を入力し、3列目でそれを実行した場合

1 cat  description 
2 dog  description 
3 fish description 

、結果は次のようになります。

1 cat  Row 1 is for cat 
2 dog  Row 2 is for dog 
3 fish Row 3 is for fish 

うまくいけば、それは十分な説明がされ=)

そこで、ここでは例えばテーブル内のサンプルであります

<tr> 
    <td></td> 
    <td><button class="format" col="1">Format Col</button></td> 
    <td><button class="format" col="2" >Format Col</button></td> 
</tr> 

<tr> 
    <td><input type="text" col="0" row="0" value="0" size="1"></td> 
    <td><input type="text" col="1" row="0" value="cat" /></td> 
    <td><input type="text" col="2" row="0" value="description" /></td> 
</tr> 

... 

、ここでは

$('td button.format').on('click', function() { 

    // get formatter variables and column number 
    string = $("#formatter").attr("value"); 
    column = $(this).attr("col"); 

    // regex to globally look for %d (where d is an integer) 
    var re = new RegExp("\%(\\d+)", "g"); 

    $('td input[col="' + column + '"]').each(function (row) { 
     // replace string here 
    }); 
}); 

現在、各列の上部にある書式ボタンのコードで、1列の値をキャプチャします。このコードの構造は、細かい

$('td input[col="' + column + '"]').each(function (i) { 
    $(this).attr("value", string.replace(re, $('td input[col="1" row="' + i +'"]').attr('value'))); 
}); 

しかし、やって動作しますこのようなもの(入力 "%2")は "undefined 2"になります。 (私はcol="\$1"で上記のcol="1"を置き換え、最初に一致する正規表現を使うために "\ $ 1"を付け加えました)。私はまた、 "\ $ 1"に加えて、 "$ 1"と "\ $ 1"を幸運なしで使用したことにも注意してください。

$('td input[col="' + column + '"]').each(function (i) { 
    $(this).attr("value", string.replace(re, $('td input[col="\$1" row="' + i +'"]').attr('value') + " \$1")); 
}); 

私の結論は、正規表現一致がjQueryの検索と検索が実行された時間に置換された時刻が正しくないということです。結果は "undefined 2"なので、正規表現がマッチしていることがわかりますが、参照が不正です。しかし、ハードコーディングcol="2"が動作するので、一般的なコードは正しいことが分かります。

これがなぜ問題に陥っているのかについての考えです。私はその構文の問題を言いたいが、多分私は間違っている。

Sidenote:私がちょうどre.match()関数を使用し、返された配列を反復した場合、これはすべて避けることができます。私は解決策が存在することを知っています、それを行うより洗練された方法があるかどうかを見ているだけです。

私はこれが長いことを知っています、ごめんなさい!私は、より多くの情報が十分でないよりも優れていると考えます。すべてを読んでくれてありがとう!

答えて

5

私はあなたがこのような何かを探していると思います:

$('td button.format').click(function() { 
    var template = "Row %0 is for %1"; 
    var col = $(this).attr("col"); 

    $("#body tr").each(function() { 
     var $row = $(this); 
     var t = template.replace(/%(\d+)/g, function($0, $1) { 
      return $row.find("td:eq(" + $1 + ") input").val(); 
     }); 
     $row.find("td:eq(" + col + ") input").val(t) 
    }) 
}) 

コンプリート例: http://jsfiddle.net/TTjtU/

+1

あなたは素晴らしいに満ちています。ソリューションは素晴らしく、あなたはまた私をjsfiddleに紹介しました。これはすばらしいサイトのようです。どこでビールを送るのですか? –

+0

うれしいことを聞いて嬉しいです、@Scotty;) – georg