mootools_MooTools Zebra Tables插件

mootools

Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors.

表格数据有时可能很无聊，但不必那样看！ 使用小型MooTools类，我可以通过实现“斑马”表(具有交替的行背景色的表)来使表格数据非常易于阅读。

View Demo 观看演示

CSS (The CSS)

.highlight		{ background:#d5fcdc; }
.even			{ background:#fff; }
.mo			{ background:#e3f1fb; }
.odd			{ background:#eee; }
.zebra th		{ padding:5px; background:#ddd; border-bottom:1px solid #999; text-align:left; font-weight:bold; }
.zebra td		{ padding:5px 20px 5px 5px; border-bottom:1px solid #ddd; }

The above CSS is extremely basic. I've styled the <TH> tag so that it stands out from table rows. There are four states of rows in my zebra table: highlighted (or "clicked on"), regular even and odd, and a mouseover state -- these are represented by the "even", "mo", "highlight", and "odd" classes. I've added padding and a bottom border to the <TD>'s for presentation.

上面CSS非常基础。 我已经设置了<TH>标记的样式，以使其在表行中脱颖而出。 斑马线表中有四种行状态：突出显示(或“单击”)，规则的偶数和奇数以及鼠标悬停状态-这些状态分别由“偶数”，“ mo”，“突出显示”和“奇数”类。 我在<TD>的演示文稿中添加了填充和底部边框。

XHTML (The XHTML)

<table class="zebra" cellpadding="0" cellspacing="0">
	<tr>
		<th>Award</th>
		<th>Actor</th>
		<th>Film</th>
	</tr>
	<tr>
		<td>Actor In A Leading Role</td>
		<td>Daniel Day-Lewis</td>
		<td>There Will Be Blood</td>
	</tr>
	<tr>
		<td>Actress In A Leading Role</td>
		<td>Marion Cotillard</td>
		<td>La Vie en Rose</td>
	</tr>
	<tr>
		<td>Actor In A Supporting Role</td>
		<td>Javier Bardem</td>
		<td>No Country For Old Men</td>
	</tr>
	<tr>
		<td>Actress In A Supporting Role</td>
		<td>Tilda Swinton</td>
		<td>Michael Clayton</td>
	</tr>
	<tr>
		<td>Directing</td>
		<td>Joel Coen and Ethan Coen</td>
		<td>No Country For Old Men</td>
	</tr>
	<tr>
		<td>Writing</td>
		<td>Diablo Cody</td>
		<td>Juno</td>
	</tr>
</table>

The above table is a simple, standard table. The only detail of note is that this table is given the "zebra" class, which signals to MooTools that this table should be zebra-ized.

上表是一个简单的标准表。 唯一需要注意的细节是该表被赋予了“斑马”类，该类向MooTools发出信号，该表应该被斑马化。

JavaScript类 (The JavaScript Class)

/* classes */
var ZebraTables = new Class({
	//initialization
	initialize: function(table_class) {

		//add table shading
		$$('table.' + table_class + ' tr').each(function(el,i) {

			//do regular shading
			var _class = i % 2 ? 'even' : 'odd'; el.addClass(_class);

			//do mouseover
			el.addEvent('mouseenter',function() { if(!el.hasClass('highlight')) { el.addClass('mo').removeClass(_class); } });

			//do mouseout
			el.addEvent('mouseleave',function() { if(!el.hasClass('highlight')) { el.removeClass('mo').addClass(_class); } });

			//do click
			el.addEvent('click',function() {
				//click off
				if(el.hasClass('highlight'))
				{
					el.removeClass('highlight').addClass(_class);
				}
				//click on
				else
				{
					el.removeClass(_class).removeClass('mo').addClass('highlight');
				}
			});

		});
	}
});

The class accepts one parameter, which is the class given to tables that should be Zebra-ized. Upon initialization, the class cycles through each table row. During the row looping, the row is given its odd or even CSS class, and a listener is added to the row to highlight the row upon mouseover. The above JavaScript could be placed into an external JavaScript file.

该类接受一个参数，这是给应该Zebra化的表的类。 初始化后，该类在每个表行中循环。 在行循环期间，该行被赋予其奇数或偶数CSS类，并且在该行上添加了一个侦听器以在鼠标悬停时突出显示该行。 上面JavaScript可以放在一个外部JavaScript文件中 。

JavaScript实现 (The JavaScript Implementation)

/* do it! */
window.addEvent('domready', function() {
	var zTables = new ZebraTables('zebra');
});

To implement ZebraTables, all you need to do is add the above code to any given page.

要实现ZebraTables，您需要做的就是将上述代码添加到任何给定的页面中。

View Demo 观看演示

Do you have any suggestions for my zebra tables? Let me know!

您对我的斑马桌有什么建议吗？ 让我知道！

翻译自: https://davidwalsh.name/mootools-zebra-tables-plugin

mootools