如何在不使用循環的情況下突出顯示HTML表格列？

我有一個表是這樣的：如何在不使用循環的情況下突出顯示HTML表格列？

<table> 
    <thead> 
    <tr> 
    <th id="col-1"><input type="button" class="some" value="Company" /></th> 
    <th>name</th> 
    <th>Adress</th> 
    <th>Zip</th> 
    <th>Place</th> 
    <th>Country</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="even"> 
    <td headers="col-1">Some ltd</td> 
    <td>some name</td> 
    <td>some street</td> 
    <td>some zip</td> 
    <td>some town</td> 
    <td>some country</td> 
    </tr> 
    <tr class="odd"> 
    <td headers="col-1">Corp</td> 
    <td>some name</td> 
    <td>some street</td> 
    <td>some zip</td> 
    <td>some town</td> 
    <td>some country</td> 
    </tr> 
    </tbody> 
</table>

奇數和偶數行有不同的亮點類oddHigh和evenHigh。

列標題，我想強調這樣的列點擊：

$(".some").live("click", function() { 
    var val = $(this).closest("TH, th").attr('id'), 
     col = $("td[headers="+ val +"]"), 
     // set odd/even 
     i = col.closest("TR, tr").hasClass("odd") ? "oddHigh" : "evenHigh"; 

    col.hasClass("colHigh") ? col.removeClass("colHigh "+i) : col.addClass("colHigh "+i); 
    });

這凸顯了oddHigh整個列。

有沒有辦法突出取決於最接近的行的類沒有循環通過整個選擇？或者我需要設置colOdd到tr.odd TD ...和colEven到tr.even TD ..並使用2個獨立的報表？

來源

2012-01-09 frequent

我不認爲你可以離開沒有循環，但是你可以使用'jquery.each'方法簡化你的代碼。 – 2012-01-09 15:46:12

如果您的瀏覽器支持，您可以使用css :even和:odd css僞類選擇器。也

tr:nth-child(odd)

和

tr:nth-child(even)

看到http://caniuse.com/#search=nth-child的兼容性。（沒有IE 6,7,8）

來源

2012-01-09 15:47:17 c4urself

是的，我也想過這個。但它需要覆蓋IE7,8，所以如果有人想出另一個非循環解決方案，我會等一會兒。如果沒有，你會得到支票。 Thx到目前爲止。 – frequent 2012-01-09 15:57:10

在這種情況下，也許你可以通過做如下簡化：$（'input.some：nth-child（odd）'）。toggleClass（'oddHigh'）;和甚至類似？ – c4urself 2012-01-09 16:07:27

你可能想看看:even和:odd jQuery僞選擇器。：D

來源

2012-01-09 15:45:34

如何在不使用循環的情況下突出顯示HTML表格列？

回答

相關問題