0

我正在尝试使用 UI Selectable 进行两组选择。

过程是这样的：

首先，我选择了几行，然后单击一个按钮来设置完成第一轮选择。并且选定的行将突出显示为一种颜色，即“红色”。然后，我开始第二轮选拔。此第二轮选择不应更改第一轮选定行的颜色。第二轮选择结束后，点击按钮设置第二轮选择结束；第二轮选择将以另一种颜色突出显示，例如“绿色”。

我可以轻松地进行第一轮选择，但我不知道如何在保持第一轮选择颜色不变的情况下进行第二轮选择。我可以手动为第一轮选择添加一个 id，但是当我进行第二轮选择时，我不知道如何保持第一轮选择的颜色不变。我什至尝试为第一轮选定的结果创建一个新的 css 样式以保持其突出显示的颜色，但它只是没有用。

在这里添加一些代码：

<!--<link rel="stylesheet" type="text/css" href="js/themes/blue/style.css"/>-->
<link rel="stylesheet" type="text/css" href="js/css/redmond/jquery-ui-1.8.20.custom.css">
<style>

#tablebody .ui-selecting { background: #F5F5DC; }
#tablebody .ui-selected { background: #98F5FF; color: black; }
.ui-selected-grp1 {background: red; color: black; }
#tablebody { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#tablebody tr { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
<script src="js/js/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#metatable").tablesorter();
    $("#tablebody").selectable();
        $('#grp1').click(function(){
        $('tr.ui-selected').addClass('ui-selected-grp1');

        return false;
    })
})
</script>

如您所见，我尝试添加类“ui-selected-grp1”来控制第一轮选择颜色，但没有奏效。当我开始进行第二轮选拔时，第一轮的亮点刚刚过去。你能给我一些关于这个过程的建议或代码示例吗？

4

1 回答 1

0

这是实现此目的的基本方法 - http://jsfiddle.net/vC7NP/。通过 jQuery 的方法设置所选元素的样式css将覆盖 jQuery UI 应用的任何 CSS，因此第一轮的颜色变化应该保持不变。

于 2012-05-11T02:07:19.633 回答