Question

所以，我有两个对象：

包含多个行和列的表。其中一列称为“Builder”
包含表格中所有可能的“构建者”的下拉列表

我想要做的是使用条件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');

    });

});

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

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

Answer 2

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

<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/

基于下拉列表的表的条件样式

3 个答案: