如何使用 Prototype 突出显示表格行?
-
09-06-2019 - |
题
如何使用 Prototype 库并创建不显眼的 javascript 将 onmouseover 和 onmouseout 事件注入到每一行,而不是将 javascript 放入每个表行标记中?
使用 Prototype 库(而不是 mootools、jQuery 等)的答案将是最有帮助的。
解决方案
<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>
其他提示
您可以使用原型 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'); }
}
一点通用的解决方案:
假设我想要一种简单的方法来制作带有行的表格,当我将鼠标指针放在它们上面时,这些行会突出显示。在理想的世界中,这将非常容易,只需要一个简单的 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' ) } );
} );
} )
超文本标记语言
您现在所要做的就是将类“highlightable”添加到您想要的任何表中:
<table class="highlightable">
...
</table>
我做了一点小小的改变 @swilliams 代码。
$$('#thetable tr:not(#headRow)').each(
这让我有一个带有标题行的表格 不 得到突出显示。
<tr id="headRow">
<th>Header 1</th>
</tr>
您可以对每一行执行一些操作,如下所示:
$('tableId').getElementsBySelector('tr').each(function (row) {
...
});
因此,在该函数的主体中,您可以访问“row”变量中的每一行,一次一行。然后您可以调用 Event.observe(row, ...)
所以,这样的事情可能会起作用:
$('tableId').getElementsBySelector('tr').each(function (row) {
Event.observe(row, 'mouseover', function () {...do hightlight code...});
});
我发现了一个有趣的行背景解决方案,行在鼠标悬停时突出显示,无需 JS。这是 关联
适用于所有浏览器。对于IE6/7/8...
tr{ position: relative; }
td{ background-image: none }
对于 Safari,我为每个 TD 使用负背景位置。