jquery - 基于下拉列表的表格的条件样式

Question

所以，我有两个对象:

1. 具有许多行和列的表格。这些列之一称为“Builder”
2. 包含表格中所有可能的“构建器”的下拉列表

我想要做的是使用条件 CSS，这样当您在下拉列表中选择“Builder X”时，所有包含“Builder X”的行都会被高亮显示。

我最初的计划是根据其构建器动态地为每一行分配一个类(我已经这样做了)，然后在您更改下拉列表中的选项时修改 CSS(我不知道该怎么做正确)。

这是一个(边缘无用的) fiddle ，显示了我所处的情况:http://jsfiddle.net/convoke/bTM6D/8/

相反，如果有更聪明/更好的方法来做到这一点，我很乐意听取。

Answer 1

我通常会使用 jQuery执行此操作的 JavaScript 框架:

$(document).ready(function(){

    $('#idOfDropDown').change(function(){

        // Remove existing active classes from the table
        $('#idOfTable tr').removeClass('active');

        // Add the new active class to the appropriate builders
        var builder = $(this).val();
        $('#idOfTable tr.' + builder).addClass('active');

    });

});

上面的代码所做的是，当您从构建器的下拉列表中选择一个选项时，它会获取所选选项的值字段并在页面上找到具有该类的所有元素，然后添加“事件”类到那些您可以使用 CSS 突出显示的元素。

这取决于下拉列表中每个构建器的值与表中构建器的类名相同。