Question

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

我通过：active pseudoclass尝试了这个，但是不能正常工作。例如，在移动设备触摸屏上，一旦用户触摸屏幕，相交的行将改变颜色，即使它不是点击[点击是短的鼠标+鼠标组合]。

这是表格：

<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，但不认为这里很重要）。

准确地说，我想要的是在点击onclick事件后该行的背景颜色变为红色。在短暂的一段时间后，将背景恢复为原始颜色。我基本上试图重现点击iOS或Android原生小部件上的列表项的视觉效果。谢谢

Answer 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。（我冒昧地改变颜色！）。

Answer 2

点击更改样式确实需要javascript，这并不是很困难，因为@ Abody97已经在他的回答中证明了这一点。

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

每个链接或按钮都有3种状态：
- 默认：不需要伪选择器。你可以将其称为“向上”状态 - 悬停：以:hover伪selctor为目标。仅在使用鼠标时有用，并且当鼠标悬停在元素上时触发（对于现代浏览器，这是任何元素，而不仅仅是链接或按钮）
- 活动：这是我之前提到的关闭状态。它由:active伪选择器定位。当使用鼠标时，它不是真的有用，因为只有按住鼠标按钮才会触发它。在toutchscreen上它更有用，因为它表明用户正确点击。

我不确定你的表的内容是什么（你的html片段在它变得有趣时停止），但我认为值得一提的是:focus伪选择器。当元素“有焦点”时，这个被触发。它仅适用于输入元素（输入，文本区域）或链接（通常仅在使用键盘导航时有用）。我相信当你尝试使用:active时，这就是你所在的那个。

我在这里设置了:focus的小例子：http://jsfiddle.net/6tN6B/ 特别是最后一个样本对您有用。使用js可以更轻松地完成它，但是我非常喜欢使用js，只有当它绝对是nessecary时，非js用户才能在你的网站上获得相同的体验。

Answer 3

这是你在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（），如果您更喜欢以前的解决方案。

获取表格中行的背景以更改单击？

3 个答案: