超强jquery表格样式

jQuery StyleTable Plugin

The StyleTable is free/open source jQuery plugin that can be used to style the tables.

jQuery StyleTable plugin

How To Use

Using StyleTable plugin is as easy as this line of code:

That will style all tables on the page. Make sure to wrap your code in ready handler like this: You can also specify the table(s) with specific class or id that you want styled: Make sure to include the jQuery library first and then StyleTable plugin before applying styles to the tables.

Plugin Options

I have tried to make option names self-explanatory. Here they are:

// settings for headings
	th_bgcolor	 		// heading background color
	th_image			// heading background image
	th_color			// heading text color
	th_border_color		// heading top/bottom border color
	
	// settings for rows
	tr_odd_bgcolor		// odd row background color
	tr_even_bgcolor		// even row background color
	tr_bgcolor			// all rows background color
	tr_hover_bgcolor	// row background color on hover
	tr_odd_image		// odd row background image
	tr_even_image		// even row background image
	tr_image			// all rows background image
	tr_hover_image		// row background image on hover
	tr_odd_color		// odd row text color
	tr_even_color		// even row text color
	tr_color			// all rows text color
	tr_border_color		// all rows border color

// settings for columns
	td_odd_bgcolor		// odd column background color
	td_even_bgcolor		// even column background color
	td_hover_bgcolor	// column background color on hover
	td_odd_image		// odd column background image
	td_even_image		// even column background image
	td_hover_image		// column background image on hover
	td_odd_color		// odd column text color
	td_even_color		// even column text color
	
	// settings for table
	font_name			// font name/family to be used for the table
	font_size			// font size to be used for the table

Since this plugin is free/open source, you can go on to modifying/adding more options to the plugin.

Examples

→ Table not using StyleTable plugin

Subject	View	Edit	Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art

→ Table using StyleTable with default options

Subject	View	Edit	Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art

→ Table using StyleTable with custom options - example 1

Subject	View	Edit	Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art

→ Table using StyleTable with custom options - example 2

Subject	View	Edit	Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art

→ Table using StyleTable with custom options - example 3

Subject	View	Edit	Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art

→ Table using StyleTable with custom options - example 4

Subject	View	Edit	Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art

→ Table using StyleTable with custom options - example 5

Subject	View	Edit	Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art

→ Table using StyleTable with custom options - example 6

Subject	View	Edit	Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art

返回站长图库

适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

代码整理：站长图库