[英]How can I highlight a table row using Prototype?
How can I use the Prototype library and create unobtrusive javascript to inject the onmouseover and onmouseout events to each row, rather than putting the javascript in each table row tag? 我如何使用Prototype库并创建不显眼的javascript来将onmouseover和onmouseout事件注入每一行,而不是将javascript放在每个表行标记中?
An answer utilizing the Prototype library (instead of mootools, jQuery, etc) would be most helpful. 使用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>
You can use Prototype's addClassName
and removeClassName
methods. 您可以使用Prototype的addClassName
和removeClassName
方法。
Create a CSS class "hilight" that you'll apply to the hilighted <tr>
's. 创建一个CSS类“hilight”,您将应用于hilighted <tr>
。 Then run this code on page load: 然后在页面加载上运行此代码:
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'); }
}
A little bit generic solution: 一点点通用的解决方案:
Let's say I want to have a simple way to make tables with rows that will highlight when I put mouse pointer over them. 假设我想要一个简单的方法来创建包含行的表,当我将鼠标指针放在它们上面时会突出显示。 In ideal world this would be very easy, with just one simple CSS rule: 在理想世界中,只需一个简单的CSS规则就可以轻松实现:
tr:hover { background: red; }
Unfortunately, older versions of IE don't support :hover selector on elements other than A. So we have to use JavaScript. 不幸的是,IE的旧版本不支持:将鼠标悬停在选择器上而不是A.所以我们必须使用JavaScript。
In that case, I will define a table class "highlightable" to mark tables that should have hoverable rows. 在这种情况下,我将定义一个表类“highlightable”来标记应该有可行行的表。 I will make the background switching by adding and removing the class "highlight" on the table row. 我将通过添加和删除表行上的“高亮”类来进行后台切换。
CSS CSS
table.highlightable tr.highlight { background: red; }
JavaScript (using Prototype) 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 HTML
All you have to do now is to add class "highlightable" to any table you want: 您现在要做的就是将“highlightable”类添加到您想要的任何表中:
<table class="highlightable">
...
</table>
I made a slight change to @swilliams code. 我对@swilliams代码做了一些改动。
$$('#thetable tr:not(#headRow)').each(
This lets me have a table with a header row that doesn't get highlighted. 这让我有一个表格,其标题行不会突出显示。
<tr id="headRow">
<th>Header 1</th>
</tr>
You can do something to each row, like so: 您可以对每一行执行某些操作,如下所示:
$('tableId').getElementsBySelector('tr').each(function (row) {
...
});
So, in the body of that function, you have access to each row, one at a time, in the 'row' variable. 因此,在该函数的主体中,您可以在'row'变量中一次访问每一行。 You can then call Event.observe(row, ...) 然后你可以调用Event.observe(row,...)
So, something like this might work: 所以,这样的事情可能会起作用:
$('tableId').getElementsBySelector('tr').each(function (row) {
Event.observe(row, 'mouseover', function () {...do hightlight code...});
});
I found ab interesting solution for Rows background, the rows highlighting on mouse over, without JS. 我找到了针对行背景的有趣解决方案,鼠标悬停时突出显示的行,没有JS。 Here is link 这是链接
Works in all browsers. 适用于所有浏览器。 For IE6/7/8 ... 对于IE6 / 7/8 ......
tr{ position: relative; }
td{ background-image: none }
And for Safari I use negative background position for each TD. 对于Safari,我使用每个TD的负背景位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.