使用jquery遍歷表格單元格

Question

我有一個包含可變列數的表格。我寫了一個功能通過各行中的每個小區重複，以執行以下操作：

1. 檢查輸入
2. 的存在檢索輸入
3. 的值附加一個餅圖來的任何細胞，其中條件＃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如上所述進行工作。運行時，餅圖將添加到顯示正確值的正確單元格中。我的問題是，我只希望每個單元格存在一個輸入的餅圖。但是，我有n個餅圖，其中n等於表中的列數。我懷疑我錯誤地使用了jQuery的each（）方法。有人能告訴我我做錯了什麼嗎？

Answer 1

當您選擇td通過上下文TR（this），因此，它只會在當前tr尋找td。嘗試這個。

$("#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)：這個選擇會發現TD具有在內部

• leats一個輸入元素的不需要存儲你的部分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