0

UISelectableを使用して2セットの選択を行おうとしています。

プロセスは次のようになります。

まず、いくつかの行を選択し、ボタンをクリックして設定して、この最初のラウンドの選択を終了します。そして、選択した行が「赤」などの色で強調表示されます。次に、第2ラウンドの選択を開始します。この2回目の選択では、1回目の選択した行の色を変更しないでください。2回目の選択後、ボタンをクリックして2回目の選択の終了を設定します。この2回目の選択は、「緑」などの別の色で強調表示されます。

1回目の選択は簡単にできますが、1回目の選択色を変えずに2回目の選択を行う方法がわかりません。最初のラウンドの選択に手動でIDを追加することはできますが、2番目のラウンドの選択を行うときに最初のラウンドの選択の色を変更しないようにする方法がわかりません。最初のラウンドで選択した結果に対して、強調表示された色を維持するために新しい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」を追加しようとしましたが、機能しませんでした。私が第2ラウンドの選択を始めたとき、第1ラウンドのハイライトはちょうどなくなっていました。このプロセスに関するアドバイスやコード例を教えてください。

4

1 に答える 1

0

これを達成するための基本的なアプローチは次のとおりです - http://jsfiddle.net/vC7NP/。jQuery のメソッドを使用して選択した要素のスタイルを設定するcssと、jQuery UI によって適用された CSS がオーバーライドされるため、最初のラウンドからの色の変更が維持されます。

于 2012-05-11T02:07:19.633 に答える