使用jquery ui滑塊來突出顯示html表格行/列

我有一個複雜的html表格div有三個滑塊。我也使用jQuery腳本和CSS來根據單元格值更改單元格的顏色。使用jquery ui滑塊來突出顯示html表格行/列

水平滑塊（Slider 1）控制另一個「Y」橫截面html表格的顯示。

長垂直滑塊（Slider 2）控制另一個「X」橫截面html表格的顯示。

較短的垂直滑塊控制主html表中顯示的「z」圖層。（移動此滑塊以顯示html內容）

我想要做的是，當移動滑塊1和2時，我希望行和列在主表中突出顯示。我寧願讓行/列上的邊框變得更粗/不同顏色，以免更改條件格式。

這裏比我想，一切工作正常的Fiddle

其他。下面是我把，試圖使其工作（我想背景顏色現在進行測試，但我最終將其更改爲邊框顏色/風格上的變化）：

$('#tab').siblings().css('background-color', '#EAD575'); 
var ind = $('#tab').index(); 
$('#tab tbody td:nth-child(' + (ind + 1) + ')').css('background-color', '#EAD575');

現在它使得很多突出顯示的內容不應包含頁面背景的部分內容。

請幫忙嗎？謝謝！

來源

2014-03-31 Crimpy

表元素是#tab元素的子元素，因此您使用.siblings()不正確。

我建議你聲明一個名爲「highlight」的CSS類，將其添加到表格單元格（td）中以更改背景顏色和/或邊框。

您可以定義如下的函數來突出顯示相應的單元格。每當滑塊改變這個函數會被調用，但輸入值改變以匹配滑塊值後，才：

function updateHighlightedCell() { 
    var iCol = parseInt($('#amount1').val(), 10) - 1, 
     iRow = parseInt($('#amount2').val(), 10) - 1, 
     $table = $tab.children(); 
    $table.find('td').removeClass('highlighted'); 
    $table.find('tr:eq(' + iRow + ')').find('td:eq(' + iCol + ')').addClass('highlighted'); 
}

jsfiddle

注：我縮小行數和列數的小提琴。

要突出的行和列，使用：

$table.find('td').removeClass('highlighted'); 
$table.find('tr').find('td:eq(' + iCol + ')').addClass('highlighted'); 
$table.find('tr:eq(' + iRow + ')').find('td').addClass('highlighted');

jsfiddle

來源

2014-04-01 00:20:35

這是對效率有很大的改進了。太棒了！感謝您的教訓！有沒有辦法使用相同的邊框樣式突出顯示整行和整列？ – Crimpy

另一個奇怪的是，在我更大的項目的html中，當我滾動時，我得到行中突出顯示的單元格的剩餘部分。任何想法可能是爲什麼？ – Crimpy

@Crimpy - 我更新了我的答案，以顯示如何突出顯示行和列。 –

使用jquery ui滑塊來突出顯示html表格行/列

回答

相關問題