0

当用户执行正确单击时，如何获取表格中行的背景以更改颜色？

我通过 :active 伪类尝试了这个，但没有按我的意愿工作。例如，在移动设备的触摸屏上，一旦用户触摸屏幕，相交的行就会改变颜色，即使它不是单击[单击是短 mouseDown+mouseUp 组合]。

这是表格：

<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;
}

有没有办法做到这一点？（我正在使用 gwt 来生成上面的 html，但在这里并不重要）。

准确地说，我想要的是在点击事件后，行的背景颜色变为红色。一段时间后，将背景恢复为原始颜色。我基本上是在尝试重现单击 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 版本的小演示：little link。（我冒昧地改变了一点颜色！）。

于 2012-09-08T17:03:12.903 回答
0

更改点击样式确实需要 javascript，这并不难，正如@Abody97 在他的回答中已经证明的那样。

我认为值得一提的是:active伪选择器代表什么，因为您似乎很困惑。Personnaly 我认为它的名字是精心选择的，如果它被称为 :down 或其他东西会更清楚。因为这正是它的本质。它针对按钮或链接的关闭状态。

每个链接或按钮有 3 种状态：
-默认：不需要伪选择器。您可以将其称为“向上”状态。
-悬停：以:hover伪选择器为目标。仅在使用鼠标时有用，并在鼠标悬停在元素上时触发（对于现代浏览器，这是任何元素，而不仅仅是链接或按钮）
-活动：这是我之前提到的向下状态。它是:active伪选择器的目标。使用鼠标时，它实际上并没有多大用处，因为只要按住鼠标按钮，它就会被触发。在触摸屏上它更有用，因为它表明用户正确点击。

我不确定你的表格的内容是什么（当它变得有趣时你的 html 片段会停止），但我认为:focus伪选择器也值得一提。当元素“具有焦点”时会触发该元素。它仅适用于输入元素（输入、文本区域）或链接（通常仅在使用键盘导航时有用）。我相信这是您尝试使用: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");

这样，您可以在 redRow CSS 类中指定更多规则，例如：

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

当您的行不需要此颜色时，您只需删除此类或使用 .getStyle().clearBackgroundColor()，如果您更喜欢前一种解决方案。

于 2012-09-09T18:13:36.250 回答