0

ユーザーが適切なクリックを実行したときに、テーブルの行の背景を取得して色を変更するにはどうすればよいですか？

：active疑似クラスを介してこれを試しましたが、希望どおりに機能しません。たとえば、モバイルデバイスのタッチスクリーンでは、ユーザーが画面に触れるとすぐに、クリックではなくても、交差する行の色が変わります[クリックはマウスダウンとマウスアップの短い組み合わせです]。

表は次のとおりです。

<table>
  <tbody>
    <tr>
      <td align="left" style="vertical-align: top;">
        <div class="GPBYFDEEB" 
          __gwtcellbasedwidgetimpldispatchingfocus="true" 
          __gwtcellbasedwidgetimpldispatchingblur="true">
          <div>
            <div class="GPBYFDEAB" tabindex="0" style="outline:none;" __idx="0" onclick="">
              <div class="GPBYFDECB" style="outline:none;" __idx="1" onclick="">
                <!-- finally this is me. -->
                <div class="tableRow">

これが私のCSSです：

.tableRow {
    background-color: green;
}

.tableRow:active {
    background-color: red;
}

これを行う方法はありますか？（私は上記のhtmlを生成するためにgwtを使用していますが、ここでは重要ではないと思います）。

正確に言うと、onclickイベントが発生した後、行の背景色を赤に変更したいと思います。しばらくすると、背景を元の色に戻します。私は基本的に、iOSまたはAndroidのネイティブウィジェットでリストアイテムをクリックしたときの視覚効果を再現しようとしています。ありがとうございました

4

3 に答える 3

1

JavaScriptはそれを非常に簡単にします：

var rows = document.getElementsByClassName("tableRow"); //get the rows
var n = rows.length; //get no. of rows
for(var i = 0; i < n; i ++) {
    var cur = rows[i]; //get the current row;
    cur.onmousedown = function() { //when this row is clicked
        this.style.backgroundColor = "red"; //make its background red
    };
    cur.onmouseup = function() {
        this.style.backgroundColor = "green";
    }
}

jQueryが含まれている場合は、さらに簡単です。

$(".tableRow").mousedown(function() {
     $(this).css("background-color", "red");
});

$(".tableRow").mouseup(function() {
     $(this).css("background-color", "green");
});

純粋なJavaScriptバージョンを使用する小さなデモ：小さなリンク。（私は自由に色を少し変えました！）

于 2012-09-08T17:03:12.903 に答える
0

@ Abody97がすでに彼の回答で示しているように、クリックでスタイルを変更することは確かにjavascriptを必要とし、それほど難しいことではありません。

:active混乱しているように見えるので、疑似セレクターの意味について言及する価値があると思います。個人的には、その名前は慎重に選ばれていると思います。：downなどと呼ばれた方がはるかに明確です。それがまさにそれである原因です。ボタンまたはリンクのダウン状態を対象としています。

各リンクまたはボタンには3つの状態があります
。-デフォルト：疑似セレクターは必要ありません。これを「アップ」状態と呼ぶことができます。
-ホバー：:hover疑似セルクターをターゲットにします。マウスを操作する場合にのみ役立ち、マウスが要素の上にあるときにトリガーされます（最近のブラウザーの場合、これはリンクやボタンだけでなく、任意の要素です）
-アクティブ：これは、前に述べたようにダウン状態です。:active疑似セレクターの対象です。マウスを使用する場合、マウスボタンが押されている間だけトリガーされるので便利です。トーチスクリーンでは、ユーザーが正しくタップしたことを示すため、はるかに便利です。

テーブルの内容がどうなるかはわかりませんが（HTMLスニペットが面白くなると停止します）、:focus疑似セレクターについても言及する価値があると思います。これは、要素が「フォーカスを持っている」ときにトリガーされます。これは、入力要素（input、textarea）またはリンク（通常、キーボードでナビゲートする場合にのみ役立ちます）でのみ機能します。私はこれがあなたがどこで使用しようとしているのか後のあなたのものだと信じています:active。

ここで小さな例を設定しました：http :focus：//jsfiddle.net/6tN6B/ 特に最後のサンプルはあなたにとって役立つかもしれません。jsを使用すると簡単に実行できますが、私はjsを絶対に必要な場合にのみ使用するのが大好きなので、js以外のユーザーもサイトで同じエクスペリエンスを得ることができます。

于 2012-09-08T18:09:41.463 に答える
0

これがGWTでの方法です。CellTableまたはDataGridにハンドラーをアタッチします。

myTable.addCellPreviewHandler(new Handler<myObject>() {

    @Override
    public void onCellPreview(CellPreviewEvent<myObject> event) {
        if ("click".equals(event.getNativeEvent().getType())) {
           myTable.getRowElement(event.getIndex()).getStyle().setBackgroundColor("red");
        }
    });
}

見た目が気に入らない場合（背景色が境界線の色と異なる場合）、代わりにこれを使用できます。

myTable.getRowElement(event.getIndex()).addClassName("redRow");

このようにして、redRowCSSクラスで次のようなルールをさらに指定できます。

.redRow {
    background: red;
    border: 2px solid red;
}

行にこの色が必要ない場合は、このクラスを削除するか、前者のソリューションが必要な場合は.getStyle（）。clearBackgroundColor（）を使用します。

于 2012-09-09T18:13:36.250 に答える