获取表中要更改的行的背景以进行单击

Get the background of the row in a table to change for a click?

本文关键字：背景 单击 获取      更新时间：2023-09-26

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

我通过：activepseudoclass尝试了这个，但没有按我的意愿工作。例如，在移动设备触摸屏上，用户一触摸屏幕，相交的行就会改变颜色，即使它不是点击[点击是一个短的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原生小部件上点击列表项的视觉效果。感谢

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版本的小演示：小链接。（我随意改变了一下颜色！）。

在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（）。

正如@Abody97在他的回答中所展示的那样，在点击时更改样式确实需要javascript，而且这并不困难。

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

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

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

我在这里用:focus设置了一个小示例：http://jsfiddle.net/6tN6B/特别是最后一个样品可能对你有用。使用js可以更容易地完成，但我非常喜欢只有在绝对必要的时候才使用js，所以非js用户在你的网站上也会获得同样的体验。

相关文章：