mootools_使用MooTools 1.2.3突出显示表行，列和单元格

mootools

Row highlighting and individual cell highlighting in tables is pretty simple in every browser that supports :hover on all elements (basically everything except IE6). Column highlighting is a bit more difficult. Luckily MooTools 1.2.3 makes the process easy.

在所有支持：hover的所有浏览器中，表格中的行高亮显示和单个单元格高亮显示都非常简单(基本上是IE6以外的所有内容)。 列突出显示要困难一些。 幸运的是，MooTools 1.2.3使此过程变得容易。

View Demo 观看演示

XHTML (The XHTML)

<table id="highlight-table">
       <colgroup></colgroup>
       <colgroup class="slim"></colgroup>
       <colgroup class="slim"></colgroup>
       <colgroup class="slim"></colgroup>
       <colgroup class="slim"></colgroup>
    <thead>
       <tr>
           <th></th>
           <th></th>
           <th></th>
           <th></th>
           <th></th>
       </tr>
    </thead>
   	<tbody>
   		<tr>
   			<td></td>
   			<td></td>
   			<td></td>
   			<td></td>
   			<td></td>
   		</tr>
   		<tr>
   			<td></td>
   			<td></td>
   			<td></td>
   			<td></td>
   			<td></td>
   		</tr>
		<!-- MORE ROWS -->
	</tbody>
</table>

A normal table. The cells being empty is inconsequential to the functionality -- place whatever you'd like in the table.

一张普通桌子。 单元格为空对功能无关紧要-将所需的内容放在表中。

CSS (The CSS)

table               { border-collapse: collapse; width: 100%; margin-top:10px; }
td                  { border: 1px solid #ccc; padding: 10px; }
thead               { width: 100%; height: 109px; background: url(header.png) no-repeat; }
.slim               { width: 88px; }
.column-hover		{ background:#eee; }
.row-hover			{ background:#ddd; }
.cell-hover			{ background:#fffea1; }

Note that I've created 3 separate hover classes -- one for each type of hover possible within the table.

请注意，我已经创建了3个单独的悬浮类-表中每种可能的悬浮类型都有一个。

MooTools JavaScript版本1-效率低下 (The MooTools JavaScript Version 1 - Inefficient)

	window.addEvent('domready',function(){
	// variables and settings
	var table = document.id('highlight-table');
	table.getElements('td').each(function(el) {
		var parent = el.getParent('tr');
		var siblings = parent.getElements('td');
		var index = siblings.indexOf(el) + 1;
		var childSelector = 'tr td:nth-child(' + index + ')';
		//add events to the table cell
		el.addEvents({
			mouseenter: function() {
				//this column
				table.getElements(childSelector).addClass('column-hover');
				//this row
				parent.addClass('row-hover');
				//this cell
				el.addClass('cell-hover');
			},
			mouseleave: function() {
				//this column
				table.getElements(childSelector).removeClass('column-hover');
				//this row
				parent.removeClass('row-hover');
				//this cell
				el.removeClass('cell-hover');
			}
		});
	});
});

The first step is grabbing every TD within the table. Iterate through that array of TDs adding mouseenter and mouseleave events to the element. The mouseenter method adds the necessary CSS classes, the mouseleave event removes them. The difficult part, in theory, is the column highlighting. Using a CSS 3 "nth-child" selector made the column-highlighting process easier than I had expected.

第一步是获取表中的每个TD。 遍历该TD数组，将mouseenter和mouseleave事件添加到元素。 mouseenter方法添加必要CSS类， mouseleave事件将其删除。 从理论上讲，困难的部分是列突出显示。 使用CSS 3“ nth-child”选择器使列突出显示的过程比我预期的要容易。

MooTools JavaScript版本2-更加高效 (The MooTools JavaScript Version 2 - More Efficient)

window.addEvent('domready',function(){
/*  METHOD 2:  Better  */
var table = document.id('highlight-table');
var rows = table.getElements('tr');

//for every row...
rows.each(function(tr,trCount){
	//we don't want the header
	if(tr.getParent().get('tag') == 'thead') { return false; }
	//add the row class to the row
	tr.addClass('row-' + trCount);
	//add the row listener
	tr.addEvents({
		'mouseenter': function(){
			tr.addClass('row-hover');
		},
		'mouseleave': function(){
			tr.removeClass('row-hover');
		}
	});
	//for every cell...
	tr.getElements('td').each(function(td,tdCount) {
		//remember column and column items
		var column = 'col-' + tdCount;
		var friends = 'td.' + column;
		//add td's column class
		td.addClass(column);
		//add the cell and column event listeners
		td.addEvents({
			'mouseenter': function(){
				$$(friends).erase(td).addClass('column-hover');
				td.addClass('cell-hover');
			},
			'mouseleave': function() {
				$$(friends).erase(td).removeClass('column-hover');
				td.removeClass('cell-hover');
			}
		});
	});
});	
});

This version is much faster because more of the work is done up front and done only once. I give all the proper class names at the beginning of the script and access the collections only when I need them.

这个版本的速度要快得多，因为更多的工作需要预先完成，并且只完成一次。 我在脚本的开头给出了所有正确的类名称，并且仅在需要它们时才访问这些集合。

View Demo 观看演示

一些想法 (A Few Thoughts)

• Remember that since every TD is analyzed, this process can be very taxing on large page.
  请记住，由于每个TD都是经过分析的，因此在大页面上此过程可能会非常麻烦。

• You can use simple CSS :hover definitions for the row and cell highlighting in all browsers except IE6.

  您可以在除IE6之外的所有浏览器中对行和单元格突出显示使用简单CSS ：hover定义。

• Nested tables will raise havoc on this system. The easy way to get prevent the problem is checking the element's TABLE parent ID to make sure it's the same as the initial table you wanted to highlight.
  嵌套表将对该系统造成严重破坏。 防止出现问题的简单方法是检查元素的TABLE父ID，以确保它与要突出显示的初始表相同。
• Since this was more of an experiment than anything, I skipped making this into a MooTools class. If anyone wanted to give that a go, I'd love to see what you come up with.
  由于这更多的是实验，因此我跳过了将其放入MooTools类的过程。 如果有人想放手一搏，我很想看看您的想法。

Great idea and execution by Chris. I am obligated to say MooTools FTW though!

克里斯的好主意和执行力。 我有义务说MooTools FTW！

翻译自: https://davidwalsh.name/highlight-table-columns

mootools