16

あなたの助けが必要です、

jQueryを使用して、どうすればよいですか

テーブルで選択した行の背景色を変更します (この例では、css クラス "highlighted" を使用しましょう)

同じ行がもう一度クリックされた場合は、デフォルトの色 (白) に戻します。css クラス「非強調表示」を選択します。

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

.highlighted {
    background: red;
}
.nonhighlighted {
    background: white;
}
</style>

</head>

<body>

<table id="data" border="1" cellspacing="1" width="500" id="table1">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

</body>

</html>
4

9 に答える 9

5

テーブルの行全体に色を付ける解決策を次に示します。

CSS

tr.highlighted td {
    background: red;
}

jQuery

$('#data tr').click(function(e) {
    $('#data tr').removeClass('highlighted');
    $(this).toggleClass('highlighted');   
});

デモ: http://jsfiddle.net/jrthib/HVw7E/2/

于 2013-07-17T15:21:28.740 に答える
1

あなたのCSSで：

.selected{
    background: #F00;
}

jqueryで：

$("#data tr").click(function(){
   $(this).toggleClass('selected');
});

基本的に、クラスを作成し、選択した行から追加/削除します。

ところで、もっと努力したかもしれませんが、コード xD には css も jquery/js もまったくありません

于 2013-07-17T15:21:29.323 に答える
0

テーブルの 2 番目の id 宣言を削除します。

<table id="data" border="1" cellspacing="1" width="500" **id="table1"**>
于 2014-12-16T14:45:36.017 に答える
0

私は JQuery の専門家ではありませんが、同じシナリオがあり、次のように達成できます。

$("#data tr").click(function(){
   $(this).addClass("selected").siblings().removeClass("selected"); 
});

スタイル：

<style type="text/css">

.selected {
    background: red;
}

</style>
于 2016-04-19T16:16:50.620 に答える
-1

セルの色を変更するには:

$(document).on('click', '#table tbody td', function (event) {


    var selected = $(this).hasClass("obstacle");
    $("#table tbody td").removeClass("obstacle");
    if (!selected)
        $(this).addClass("obstacle");

});
于 2020-01-10T15:17:59.433 に答える