代码之家 › 专栏 › 技术社区 › Jason Navarrete

如何使用原型突出显示表行?

prototypejs ajax javascript

Jason Navarrete · 技术社区 · 16 年前

如何使用原型库并创建不引人注目的javascript来将onMouseOver和onMouseOut事件注入到每一行,而不是将javascript放入每个表行标记中?

使用原型库(而不是moooltools、jquery等)的答案将是最有用的。

6 回复 | 直到 12 年前

swilliams 16 年前

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

pix0r 16 年前

你可以使用原型的 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'); }  
}

Fczbkk 16 年前

一点通用的解决方案:

假设我想有一个简单的方法来创建具有行的表,当我将鼠标指针放在这些表上时,这些行将突出显示。在理想情况下,这非常简单,只需要一个简单的css规则:

tr:hover { background: red; }

不幸的是,旧版本的IE不支持:将选择器悬停在a以外的元素上。因此我们必须使用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>

Community CDub 7 年前

我对 @swilliams 代码。

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

这样我就有了一个带有标题行的表, 不突出显示。

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

pkaeding 16 年前

您可以对每一行执行一些操作,例如:

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

所以,在这个函数的主体中,您可以访问“row”变量中的每一行,一次一行。然后可以调用事件。观察(行,…)

所以,像这样的事情可能会奏效:

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

Toon Krijthe 12 年前

我发现了AB有趣的行背景解决方案,鼠标悬停时突出显示的行,没有JS。这里是 link

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

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

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