如何單獨或作爲一組切換單元格顏色

我們有一個帶有say（nxm矩陣）的簡單表格，用戶將根據以下條件隨機選擇一組條目。如何單獨或作爲一組切換單元格顏色

我們的佈局是這樣的（只是僞代碼）

<table> 
    <thead> 
     <tr> 
      c:forEach 1...31 
      <th></th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> // could be 30 | 40 | 50 rows 
      <td>1...31</td> // Just mentioned that there would be as much cells as looped on the c:forEach above 
     </tr> 
    </tbody> 
</table>

一]在電池的選擇，我們想翻轉藍色，黃色的單元格顏色（即）。顏色應該在特定的單元格選擇上切換。 b]如果用戶選擇標題面板（例如1 ... 31之間的任何值），相應的列（即該列中的所有單元格）應在藍色，黃色之間切換

我們正在考慮使用不可見覆選框來執行此操作，但我們沒有得到JavaScript（我們使用jquery）邏輯來選擇並正確取消選擇。這裏需要指針來實現這個功能。

來源

2010-07-16 Sam

你可以做這樣的事情，加入適量的CSS類後：

處理細胞：

$('table#yourtable').find('tbody td').click(function(){ 
    $(this).toggleClass('yellow'); 
    // flip yellow on or off 
    // you can figure out how to deal with other states 
});

處理列：

$('table#yourtable').find('thead th').click(function(){ 
    var col = $(this).prevAll().length; // had siblings, should be prevall 
    $('table#yourtable').find('tbody tr').each(function(){ 
     $(this) 
      .find('td:eq('+col+')') // nth column 
      .removeClass('yellow blue neutral') // reset colors 
      .addClass('green'); // add a color 
    }); 
});

沒有測試，這無疑能進一步優化，但它應該給你一些想法。

來源

2010-07-16 05:06:31

這不會返回正確的值：'var col = $（this）.siblings（）。length + 1;'。兄弟姐妹看起來是一個元素的兩面。如果我點擊第2列10列，則返回10，而不是2. – 2010-07-16 05:11:05

是的，你有我。將其更新爲prevall。 – 2010-07-16 05:13:03

不挑剔，但你也錯過'.find（'td：eq（col）'）'上的連接。不知道是否在編輯之前，或者我第一次錯過了它。 – 2010-07-16 05:21:00

jQuery是一個偉大的庫。您可以使用nth-child()選擇器來檢索列等內容。東西可能是這樣的：

$('table thead th').click(function() { 
    // Quick access to the index of this column. 
    // Add an extra 1 to this because later nth-child is 1-indexed. 
    var idx = $(this).prevAll('th').size() + 1; 

    $('table tbody tr td:nth-child(' + idx + ')').css({ 
    'background-color': 'green' 
    }); 
})

作爲一般的方法。我不知道你想要什麼類型的邏輯處理以及你的顏色適合哪裏，但這應該有所幫助。

來源

2010-07-16 04:56:36

如何單獨或作爲一組切換單元格顏色

回答

相關問題