jQuery選擇行表中的視覺列與rowspan

我已經看到了一些類似的問題，但沒有回答這個具體問題。考慮下表：jQuery選擇行表中的視覺列與rowspan

<table id="foo" border="1px"> 
    <tr> 
     <td rowspan="2">one</td> 
     <td>two</td> 
     <td rowspan="2">three</td> 
     <td>four</td> 
     <td>five</td> 
    </tr> 
    <tr> 
     <td rowspan="2">two</td> 
     <td>four</td> 
     <td>five</td> 
    </tr> 
    <tr> 
     <td rowspan="2">one</td> 
     <td>three</td> 
     <td>four</td> 
     <td>five</td> 
    </tr> 
    <tr> 
     <td>two</td> 
     <td>three</td> 
     <td>four</td> 
     <td>five</td> 
    </tr> 
</table>

使用jQuery，如何選擇特定視覺列中的所有項目？例如，如果我想選擇第3列，我應該以「三」作爲內容獲取所有td。

來源

2011-05-12 AdmSteck

避風港」牛逼的看着張貼的插件，但我發現有趣的問題，所以我創建了一個小提琴！

http://jsfiddle.net/PBPSp/

如果撐着工作可能比這更好的，但它是一個有趣的練習，所以我可能會爲好貼吧。

將colToGet更改爲想要突出顯示的列。

$(function() { 
    var colToGet = 2; 

    var offsets = []; 
    var skips = []; 

    function incrementOffset(index) { 
     if (offsets[index]) { 
      offsets[index]++; 
     } else { 
      offsets[index] = 1; 
     } 
    } 

    function getOffset(index) { 
     return offsets[index] || 0; 
    } 

    $("#foo > tbody > tr").each(function(rowIndex) { 

     var thisOffset = getOffset(rowIndex); 

     $(this).children().each(function(tdIndex) { 

      var rowspan = $(this).attr("rowspan"); 

      if (tdIndex + thisOffset >= colToGet) { 
       if(skips[rowIndex]) return false; 

       $(this).css("background-color", "red"); 

       if (rowspan > 1) { 
        for (var i = 1; i < rowspan; i++) { 
         skips[rowIndex + i] = true; 
        } 
       } 

       return false; 
      } 

      if (rowspan > 1) { 
       for (var i = 1; i < rowspan; i++) { 
        incrementOffset(rowIndex + i); 
       } 
      } 
     }); 
    }); 
});

來源

2011-05-12 17:33:08

有沒有什麼方法可以擴展到覆蓋族羣？ – 2013-08-29 08:29:58

@Asad快速和骯髒，只是輕微測試，但它似乎工作。 http://jsfiddle.net/PBPSp/80/ – 2013-08-29 14:21:53

謝謝！我其實正在嘗試這樣做。NET，並且在算法上纏着我的腦袋有點麻煩。 – 2013-08-29 14:25:41

我不知道你想如何選擇它們，但這樣的事情？

$(function() { 
    $("#foo").find("td:contains('three')").css("background-color","#eee"); 
});

在選擇它們之後，您想要對TD進行什麼操作？

來源

2011-05-12 17:02:59 user647345

給你的每個行/列類。因此，第1行第1列將有class='Row1 Column1'然後根據需要選擇該類。（如果你不希望永遠選擇上行時，您將不再需要該行規範只是試圖推斷出如何做網格

來源

2011-05-12 17:13:23 Chad

This plugin處理複雜的合併單元格和行跨度選擇：

$('#foo th:nth-col(3), #foo td:nth-col(3)').css("color","red");

來源

2011-05-12 17:19:51 utt73

驚人的插件！ – supertrue 2012-02-17 21:42:15

由於僞選擇器API的更改而無法在jQuery 1.8+上工作 - http://stackoverflow.com/questions/11624345/getting-the-match-object-in-a-custom-filter-selector- in-jquery-1-8 – amram99 2014-07-15 18:59:11

如果你想支持合併單元格和行跨度，那麼首先你需要構建表指數，即。矩陣，用於標識每個行中的單元格位置，而不考慮標記。然後，您需要跟蹤所有表格單元格的事件，並計算它們在矩陣中的偏移量以及共享水平和垂直索引的列。

這是我爲此開發的一個插件https://github.com/gajus/wholly的描述。使用這些事件可以找到行或列中的所有值，包括使用rowspan或solspan屬性附加的值。

我做了一個可視化，演示了一個表格和導航時觸發的事件。

Wholly

橙色是活動單元格，紅是由垂直事件和藍色觸發的細胞通過水平事件所觸發的細胞。

來源

2014-10-16 11:55:48 Gajus

jQuery選擇行表中的視覺列與rowspan

回答

相關問題