如何使用Prototype库并创建不引人注目的JavaScript来向每行注入onmouseover和onmouseout事件，而不是将javascript放在每个表的row标签中？

利用Prototype库(而不是mootools，jQuery等)的答案将非常有帮助。

解决方案

回答

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

创建一个CSS类" hilight"，将其应用于突出显示的<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'); }  
}

回答

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

回答

我们可以为每一行做一些事情，如下所示：

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

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

因此，这样的事情可能会起作用：

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

回答

我对@swilliams代码做了些微更改。

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

这让我有一个表头行未突出显示的表。

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

回答

一些通用的解决方案：

假设我想有一种简单的方法来制作带有行的表，当将鼠标指针放在行上时这些行将突出显示。在理想情况下，这很简单，只需一个简单的CSS规则即可：

tr:hover { background: red; }

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

在这种情况下，我将定义一个表类" highlightable"以标记应该具有可悬停行的表。我将通过在表行上添加和删除类"突出显示"来进行后台切换。

的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>

回答

我发现了一个有趣的解决方案，用于Rows背景，不用JS，鼠标悬停时行会突出显示。这是链接

在所有浏览器中均可使用。对于IE6 / 7/8 ...

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

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