10

如何使用 Prototype 库并创建不显眼的 javascript 将 onmouseover 和 onmouseout 事件注入每一行，而不是将 javascript 放在每个表行标记中？

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

4

6 回答 6

10 
<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>
于 2008-09-09T16:07:33.670 回答
7

您可以使用原型addClassName和removeClassName方法。

创建一个 CSS 类“hilight”，您将应用于 hilighted<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'); }  
}
于 2008-09-09T16:07:00.973 回答
3

一点通用的解决方案：

假设我想要一种简单的方法来制作带有行的表格，当我将鼠标指针放在它们上面时会突出显示。在理想世界中，这将非常容易，只需一条简单的 CSS 规则：

tr:hover { background: red; }

不幸的是，旧版本的 IE 不支持在 A 以外的元素上的 :hover 选择器。所以我们必须使用 JavaScript。

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

CSS

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

JavaScript（使用原型）

// 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>
于 2008-09-27T04:45:35.480 回答
2

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

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

这让我有一个没有突出显示标题行的表格。

<tr id="headRow">
    <th>Header 1</th>
</tr>
于 2008-09-09T16:19:13.393 回答
1

您可以对每一行执行一些操作，如下所示：

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

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

所以，这样的事情可能会起作用：

$('tableId').getElementsBySelector('tr').each(function (row) {
  Event.observe(row, 'mouseover', function () {...do hightlight code...});
});
于 2008-09-09T16:11:13.380 回答
0

我为 Rows 背景找到了一个有趣的解决方案，鼠标悬停时突出显示的行，没有 JS。这是链接

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

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

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

于 2010-03-03T12:13:29.247 回答