如何使用Prototype来突出显示表格行？

Question

如何使用Prototype来突出显示表格行？

javascriptajaxprototypejs

10

如何使用Prototype库创建非侵入式的JavaScript来为每行注入onmouseover和onmouseout事件，而不是将JavaScript放在每个表格行标记中？

使用Prototype库（而不是Mootools、jQuery等）的答案将最有帮助。

- Jason Navarrete

6个回答

7

您可以使用Prototype的addClassName和removeClassName方法。

创建一个名为“hilight”的CSS类，应用于高亮显示的<tr>。然后在页面加载时运行以下代码：

var rows = $$('tbody tr');  
for (var i = 0; i < rows.length; i++) {  
    rows[i].onmouseover = function() { $(this).addClassName('hilight'); }  
    rows[i].onmouseout = function() { $(this).removeClassName('hilight'); }  
}

- pix0r

3

一个比较通用的解决方案：

假设我想要一种简单的方法来制作表格，其中的行在鼠标指针悬停时会高亮显示。在理想的情况下，这将非常容易，只需一个简单的CSS规则即可：

```css tr:hover { background-color: yellow; } ```

tr:hover { background: red; }

很遗憾，旧版IE不支持除A元素以外的其他元素上的:hover选择器。因此我们必须使用JavaScript。

在这种情况下，我将定义一个表类“highlightable”，以标记应具有可悬停行的表格。我将通过添加和删除表行上的类“highlight”来进行背景切换。

CSS

table.highlightable tr.highlight { background: red; }

JavaScript (使用Prototype库)

// when document loads
document.observe( 'dom:loaded', function() {
    // find all rows in highlightable table
    $$( 'table.highlightable tr' ).each( function( row ) {
        // add/remove class "highlight" when mouse enters/leaves
        row.observe( 'mouseover', function( evt ) { evt.element().addClassName( 'highlight' ) } );
        row.observe( 'mouseout', function( evt ) { evt.element().removeClassName( 'highlight' ) } );
    } );
} )

HTML

现在您需要做的是将“highlightable”类添加到您想要的任何表格中：

<table class="highlightable">
    ...
</table>

- Fczbkk

如果您使用以下文档类型声明，tr:hover 可在 IE 7 中正常工作：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - bartosz.r

2

我对@swilliams的代码做了一点小改动。

$$('#thetable tr:not(#headRow)').each(

这让我可以拥有一个带有标题行的表格，而不会被突出显示。

<tr id="headRow">
    <th>Header 1</th>
</tr>

- Mark Biek

我可以这样理解吗？如果我将它们分类为_highlightable_，并调用$$(.highlightable).each()，那么我就可以选择所有行了吗？ - Jason Navarrete

类似 $$('#thetable not(th)') 这样的东西能行吗？我通常使用 TH。 - Lucas Jones

1

你可以这样对每一行进行操作：

$('tableId').getElementsBySelector('tr').each(function (row) {
  ...
});

所以，在该函数的主体中，你可以逐行访问“row”变量中的每一行。然后，你可以调用Event.observe(row, ...)。

因此，像这样做可能有效：

$('tableId').getElementsBySelector('tr').each(function (row) {
  Event.observe(row, 'mouseover', function () {...do hightlight code...});
});

- pkaeding

0

我找到了一个有趣的解决方案，可以在没有JS的情况下，在鼠标悬停时突出显示行背景。这里是link。

适用于所有浏览器。对于IE6/7/8...

tr{ position: relative; }
td{ background-image: none }

而对于Safari，我为每个TD使用负背景位置。

- Zloi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- swilliams · Accepted Answer

<table id="mytable">
    <tbody>
        <tr><td>Foo</td><td>Bar</td></tr>
        <tr><td>Bork</td><td>Bork</td></tr>

    </tbody>
</table>

<script type="text/javascript">

$$('#mytable tr').each(function(item) {
    item.observe('mouseover', function() {
        item.setStyle({ backgroundColor: '#ddd' });
    });
    item.observe('mouseout', function() {
        item.setStyle({backgroundColor: '#fff' });
    });
});
</script>