jqueryを使用してテーブルセルを反復する

Question

私は可変数の列を含むテーブルを持っています。入力

の存在について

1. チェック任意のセル場所に円グラフを追加入力
2. の値を取得します。私は、次の手順を実行するために、各列の各セルを反復処理する機能を書い条件＃1が真

に評価されここに私のコードです：

function addPieCharts() { 
var htmlPre = "<span class='inlinesparkline' values='"; 
var htmlPost = "'></span>" 
var colors = ["red", "blue"]; 

$("#MarketsTable tr").each(function() { 

    $('td').each(function() { 
     var value = $(this).find(":input").val(); 
     var values = 100 - value + ', ' + value; 

     if (value > 0) { 
      $(this).append(htmlPre + values + htmlPost); 
     } 
    }) 

}) 

$('.inlinesparkline').sparkline('html', { type: 'pie', sliceColors: colors }); 
} 

手順1-3でbasicalです説明したように動作します。これが実行されると、正しい値を表示する正しいセルに円グラフが追加されます。私の問題は、入力が存在するセルごとにただ1つの円グラフが必要だと思います。しかし、nには表の列数が等しいセルあたりn個の円グラフがあります。私は間違ってjQueryのeach（）メソッドを使用していると思う。誰かが私が間違ったことを教えてもらえますか？

Answer 1

tdを選択すると、でのみtdが検索されるように、tr（this）としてコンテキストを渡します。これを試して。ここで

$("#MarketsTable tr").each(function() { 

    $('td', this).each(function() { 
     var value = $(this).find(":input").val(); 
     var values = 100 - value + ', ' + value; 

     if (value > 0) { 
      $(this).append(htmlPre + values + htmlPost); 
     } 
    }) 

}) 

Answer 2

は、私はあなたのコードを変更する方法を次のとおりです。

• #MarketsTable td:has(:input)：このセレクタは

• のあなたの部分を格納する必要はありません内でleats 1つのINPUT要素を持つTDを見つけるだろう変数IMOのhtmlで、必要なときに要素を作成してTDに追加してください。

function addPieCharts() { 

    var colors = ["red", "blue"]; 

    // directly select the TD with an INPUT element inside 
    $('#MarketsTable td:has(:input)').each(function() { 

     var value = $(this).find(":input").val(); 

     if (value > 0) { 

      // only make the values string if necessary, when value > 0 
      var valStr = (100 - value).toString() + ', ' + value; 

      // create your span tag and append it to 'this' (the TD in this case) 
      $('<span class="inlinesparkline" values="' + valStr + '"></span>').appendTo(this); 
     } 

    }); 

    $('.inlinesparkline').sparkline('html', { 
     type: 'pie', 
     sliceColors: colors 
    }); 
} 

DEMO