using a Jquery ui Slider to highlight html table row/column

Question

I have a complex html table div that has three sliders. I also use a jquery script and css to change the color of the cells based on the cell value.

the horizontal slider (Slider 1) controls the display of another html table of the "Y"cross section.

the long vertical slider (Slider 2)controls the display of another html table of the "X" cross section.

The shorter vertical slider controls the "z" layer displayed in the main html table. (move this slider to have html content appear)

What I would like to do is, when Sliders 1 and 2 are moved, I want the row and column to be highlighted in the main table. I would prefer to have the border on the row/column to be thicker/different color as to not change the conditional formatting.

Here's the Fiddle

Other than what I want, everything else works fine. Here's what I put in to try and make it work (I'm trying background color for now for testing, but I would eventually change it to border color/style change):

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

Right now it's making a lot of things highlighted where it shouldn't including parts of the page background.

Any help please? Thanks!

Answer 1

The table elements are children of the #tab element, so your use of .siblings() is incorrect.

I suggest you declare a CSS class named "highlighted" that you add to a table cell (td) to change the background color and/or border.

You could define a function like the following that highlights the appropriate cell. This function would be called whenever a slider is changed, but only after the input value is changed to match the slider value:

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

Note: I scaled down the number of rows and columns in the fiddle.

---

To highlight the row and column, use:

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

jsfiddle