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

Question

所以，我有两个对象：

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

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

我最初的计划是根据其构建器（我已经完成）动态地为每一行赋予一个类，然后在您更改下拉列表中的选项时修改 CSS（我无法弄清楚如何正确执行）。

这是一个（边缘无用的）小提琴，显示了我所处的情况：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 突出显示。

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

Answer 2

您可以在每一行上使用 data- 属性来表示其构建器：

<tr data-builder="x"> ... </tr>

那么您可以在下拉更改事件中执行以下操作

$("#my_table").
    find("tr").removeClass("highlighted").
    find("tr[data-builder='" + selectedBuilder + "']").addClass("highlighted")

Answer 3

试试这个 jsFiddle，应该让你开始：

http://jsfiddle.net/Bchgu/