單擊時突出顯示錶格列

Question

用我的表格，用戶可以對結果進行升序和降序排序。我需要把它放到這裏，當他們點擊標題按鈕對該列進行排序時，它會更改所有列的背景（直接在該標題列的下面）以更改背景顏色...以下是我的代碼： 這裏是在CSS：

<style type="text/css"> 
.move_right { 
    padding-left: 5px; 
} 
.center-text { 
    padding-right: 5px; 
} 
.bottom_center_text { 
    padding-left: 2px; 
} 
#nav_bottom { 
    height: 0px; !important 
} 
#portfolio_header { 
    Background-color: #5E90B3; 
    color: white; 
    border: 1px solid #CCCCCC; 
    font-weight: bold; 
    font-size: 14px; 
    margin-bottom: 0px; 
    padding: 10px; 
} 
table#bin, table#fallen, table#growth, table#turn { margin:10px 0; border:1px solid #ccc; } 
th, td { padding:10px 7px; } 
tr th { background:#ededed; color:#545454; font-weight:bold; cursor:pointer;} 
#bin tr.even td { background:#e1eff1; } 
#turn tr.even td { background:#f7f2d8; } 
#fallen tr.even td { background:#f2dcbd; } 
#growth tr.even td { background:#deefdc; } 
td.title a { text-decoration:none; display:block; text-transform:uppercase; font-weight:bold;} 
#bin td.title { background:#5198a0; } 
#fallen td.title { background:#e6a850; } 
#turn td.title { background:#ebd870; } 
#growth td.title { background:#6ab065; } 
#bin td.title a { color:#182c2e; font-size:13px;} 
#fallen td.title a { color:#352713; font-size:13px;} 

#turn td.title a { color:#37321a; font-size:13px; } 
#growth td.title a { color:#233d21; font-size:13px;} 
hr { border:2px dotted #ccc; border-bottom:none; } 
#tooltip { position:absolute; z-index:3000; border:1px solid #111; background-color:#eee; padding:5px; } 
#tooltip h3, #tooltip div, #tooltip p { margin:0; } 


/*#bin tr.even td.click, th.click,*/ td.click, th.click 
{ 
    background-color: #000000; 
} 
/*#bin tr.even td.hover, tr.hover,*/ td.hover, tr.hover 
{ 
    background-color: #CCC; 
} 
/*#bin tr.even th.hover, tfoot td.hover,*/ th.hover, tfoot td.hover 
{ 
    background-color: ivory; 
} 
/*#bin tr.even td.hovercell, th.hovercell,*/ td.hovercell, th.hovercell 
{ 
    background-color: #abc; 
} 
/*#bin tr.even td.hoverrow, th.hoverrow,*/ td.hoverrow, th.hoverrow 
{ 
    background-color: #6df; 
} 
</style> 

這裏的HTML：

 <table cellspacing="0" cellpadding="0" id="bin" width="100%"> 
     <thead> 
      <tr> 
       <th style="text-align:left; padding-top: 20px;" width="10%" title="Sort by Symbol" id="row-1" data-column="1">Symbol <img src="/images/sort-arrow-up.jpg" title="Sort by Symbol" alt="Sort by Symbol" class="sort-right move-left bottom-image" id="image1"/></th> 
       <th style="text-align:left;" width="20%" title="Sort by Company Name" id="row-2" data-column="2">Company<br><span class="move_right">Name</span> <img src="/images/sort-arrow-up.jpg" title="Sort by Company Name" alt="Sort by Company Name" class="sort-right move-left" id="image2"/></th> 
       <th style="text-align:center;" width="12%" title="Sort by Buy Date" id="row-3" data-column="3"><span class="center-text">Buy</span><br>Date <img title="Sort by Buy Date" src="/images/sort-arrow.jpg" alt="Sort by Buy Date" id="image3"/></th> 
       <th style="text-align:center;" width="10%" title="Sort by Buy Price" id="row-4" data-column="4"><span class="center-text">Buy</span><br>Price &nbsp;<img title="Sort by Buy Price" src="/images/sort-arrow.jpg" alt="Sort by Buy Price" id="image4"/></th> 
       <th style="text-align:center;" width="9%" title="Sort by Closed Price" id="row-5" data-column="5"><span class="center-text">Closed</span><br>Price &nbsp;<img title="Sort by Closed Price" src="/images/sort-arrow.jpg" alt="Sort by Closed Price" id="image5"/></th> 
       <th style="text-align:center;" width="9%" title="Sort by Closed Date" id="row-6" data-column="6"><span class="center-text">Closed</span><br>Date &nbsp;<img title="Sort by Closed Date" src="/images/sort-arrow.jpg" alt="Sort by Closed Date" id="image6"/></th> 
       <th style="text-align:center;" width="10%" title="Sort by Current Return" id="row-7" data-column="7"><span class="center-text">Total</span><br>Return &nbsp;<img title="Sort by Current Return" src="/images/sort-arrow.jpg" alt="Sort by Current Return" id="image7"/></th> 
      </tr> 
     </thead> 
     <tbody> 
<?php 
    foreach($buylist as $a) { 
     $bg = ($c % 2) ? ' class="even"' : ''; 
     $direction = (is_numeric($a['creturn']) && $a['creturn'] >= 0) ? 'up_green' : 'down_red'; 
     $tick = (is_numeric($a['creturn']) && $a['creturn'] >= 0) ? '<img src="/images/icon_up.gif">' : '<img src="/images/icon_down.gif">'; 
     $tick2 = (is_numeric($a['cchange']) && $a['cchange'] >= 0) ? '<img src="/images/icon_up.gif">' : '<img src="/images/icon_down.gif">'; 
     $tick3 = (is_numeric($a['final_return_pct']) && $a['final_return_pct'] >= 0) ? '<img src="/images/icon_up.gif">' : '<img src="/images/icon_down.gif">'; 
     $type = ''; 
     $entry_price = (is_numeric($a['buyprice'])) ? '$'.$a['buyprice'] : '&ndash;'; 
     $sold_price = (is_numeric($a['sold_price'])) ? '$'.$a['sold_price'] : '&ndash;'; 
     $total_return= sprintf("%.02f", (($a['sold_price'] - $a['buyprice'])/$a['buyprice']) * 100); 
?> 
      <tr<?=$bg;?>> 
       <td data-column="1"><b><a href="/gamechangers/getaquote/?symbolsearch=<?php echo $a['symbol']; ?>"><?=$a['symbol'];?></a></b><?=$type;?></td> 
       <td data-column="2"><?=$a['name'];?></td> 
       <td align="center" data-column="3"><?=$a['buydate'];?></td> 
       <td align="center" data-column="4"><?=$entry_price;?></td> 
       <td align="center" data-column="5"><?php echo $sold_price; ?></td> 
       <td align="center" data-column="6"><?=$a['sold_date'];?></td> 
       <td align="center" data-column="7"><?php echo $total_return; ?>%</td> 
      </tr> 
<?php 
     $c++; 
    } 
?> 
     </tbody> 
    </table> 

我一直在使用一個插件嘗試過，但是這是沒有用，因爲我從數據庫中有PHP抓取內容，並直接將其送到表。注意：當PHP從數據庫中獲取內容時，它將表格中的行的顏色從白色變爲藍色。

任何和所有的幫助，非常感謝。

Answer 1

我會分配每<td>和<th> a data-column屬性指示它是哪一列。然後點擊<th>，抓住標題的data-column屬性，並使用jQuery（或類似的庫）更改所有表格單元格的顏色，該屬性值爲data-column。

示例表格標記：

<table id="table"> 
    <thead> 
    <tr> 
     <th data-column="1">Column 1</th> 
     <th data-column="2">Column 2</th> // etc .... 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td data-column="1">contents</td> 
     <td data-column="2">contents</td> // etc... 
    </tr> 
    </tbody> 
</table> 

實例的jQuery：

$('body').on('click', '#table th', function(){ 

    // Grab the column number 
    var column = $(this).attr('data-column'); 

    // Reset any highlighted columns 
    $('#table td').removeClass('highlighted'); 

    // Set all columns with the same column number to have the highlight class 
    $('#table td[data-column='+column+']').addClass('highlighted'); 

}) 

希望這有助於！

最佳， 安德魯

Answer 2

您應該能夠使用jQuery做到這一點很容易地使用.index()和:eq()，而無需改變你的當前HTML。

當您單擊做排序，萬事俱備後，搶點擊<th>行中使用這個位置：

var colNum = $(this).parent().children().index($(this)); 

。 。 。不過，這是假定點擊事件本身綁定到<th>。如果它是依賴於一個較低的水平元素，你就必須修改代碼一點點，這樣的：

var parentTH = $(this).closest("th"); 
var colNum = parentTH.parent().children().index(parentTH); 

一旦你的行中的<th>的指數，則可以選擇所有該<td>標記，在他們行的相同位置，像這樣的：

var selectedColCells = $("#bin tr").find("td:eq(" + colNum + ")"); 

一旦你擁有了這些，你可以添加一個類或直接更改樣式爲每一個（我推薦使用一類:)）。您還需要每次清除表格中所有<td>標籤的類/樣式，以便重置爲默認的「未排序」外觀。注意，如果您在表格中使用了<colgroup>，而在每列中使用<col>，則可以使用相同的邏輯，但只需使用類/樣式更新所選的<col>，而不是每個<td>列中。

編輯：在點擊事件綁定到低於<th>級別的元素時，修復了查找「colNum」值的邏輯中的一個小問題。