Question

我有一个复杂的html表格div，它有三个滑块。我还使用jquery脚本和css根据单元格值更改单元格的颜色。

水平滑块（滑块1）控制“Y”横截面的另一个html表格的显示。

长垂直滑块（滑块2）控制“X”横截面的另一个html表格的显示。

较短的垂直滑块控制主html表格中显示的“z”图层。（移动此滑块以显示html内容）

我想要做的是，当移动滑块1和2时，我希望在主表中突出显示行和列。我宁愿让行/列上的边框更粗/不同颜色，以免更改条件格式。

除了我想要的，其他一切都很好。以下是我尝试使其工作的原因（我现在尝试使用背景颜色进行测试，但最终我会将其更改为边框颜色/样式更改）：

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

现在它突出了很多东西，它不应该包含页面背景的部分内容。

请帮忙吗？谢谢！

Answer 1

表格元素是#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

使用Jquery ui Slider突出显示html表行/列

1 个答案: