超强jquery表格样式

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是超强jquery表格样式的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超强jquery表格样式</title>
<link rel="stylesheet" type="text/css" href="SyntaxHighlighter.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="styletable.jquery.plugin.js"></script>
<script type="text/javascript">
	$(function(){
		$('table#table1').styleTable();

		$('table#table2').styleTable({
			th_bgcolor: '#3E83C9',
			th_color: '#ffffff',
			th_border_color: '#333333',
			tr_odd_bgcolor: '#ECF6FC',
			tr_even_bgcolor: '#ffffff',
			tr_border_color: '#95BCE2',
			tr_hover_bgcolor: '#BCD4EC'
		});

		$('table#table3').styleTable({
			th_bgcolor: '#B9C9FE',
			th_color: '#003399',
			th_border_color: '#003399',
			tr_odd_bgcolor: '#E8EDFF',
			tr_even_bgcolor: '#E8EDFF',
			tr_border_color: '#ffffff',
			tr_hover_bgcolor: '#D0DAFD'
		});

		$('table#table4').styleTable({
			th_bgcolor: '#CDDFB5',
			th_border_color: '#4C5F3B',
			tr_odd_bgcolor: '#F2FFE1',
			tr_even_bgcolor: '#ffffff',
			tr_border_color: '#6E8F50',
			tr_hover_bgcolor: '#B4CF9B'
		});

		$('table#table5').styleTable({
			th_bgcolor: '#BCD4EC',
			th_image: './images/center.jpg',
			th_color: '#000000',
			th_border_color: '#333333',
			tr_odd_image: './images/formbg.gif',
			tr_even_image: './images/hnav-a-bg-black.jpg',
			tr_hover_image: './images/s_bg.jpg',
			tr_even_color: '#ffffff',
			tr_border_color: '#cccccc'
		});


		$('table#table6').styleTable({
			th_bgcolor: '#CDDFB5',
			th_border_color: '#4C5F3B',
			td_odd_bgcolor: '#ffffff',
			td_even_bgcolor: '#F2FFE1',
			td_hover_bgcolor: '#B4CF9B',
			tr_border_color: '#6E8F50'
		});
		
		$('table#table7').styleTable({
			th_image: './images/bg_hover.png',
			td_odd_image: './images/bg.jpg',
			td_even_image: './images/formbg.gif',
			td_hover_image: './images/bg_topbar.gif'
		});
		
	});
</script>

</head>

<body>

   <h2 align="center">jQuery StyleTable Plugin</h2>
   <p align="center">
	The StyleTable is free/open source jQuery plugin that can be used to style the tables.<br /><br />
	<img src="./images/tablestyle.gif" border="0" alt="jQuery StyleTable plugin" title="jQuery StyleTable plugin" />
   </p>

   <h2>How To Use</h2>
   <p>Using StyleTable plugin is as easy as this line of code:</p>
   
	<textarea name="code" class="javascript">
	$('table').styleTable();
	</textarea>
	That will style all tables on the page. Make sure to wrap your code in <strong>ready</strong> handler like this:

	<textarea name="code" class="javascript">
	$(document).ready(function(){
		$('table').styleTable();
	});
	</textarea>

	You can also specify the table(s) with specific class or id that you want styled:
	<textarea name="code" class="javascript">
	$(document).ready(function(){
		$('table').styleTable(); 			// styles all tables on the page
		$('table.fancy').styleTable(); 		// styles all tables on the page with class set to fancy
		$('table#stylish').styleTable(); 	// styles a single table with id set to stylish
	});
	</textarea>

	Make sure to include the jQuery library first and then StyleTable plugin before applying styles to the tables.

	<textarea name="code" class="xml">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="styletable.jquery.plugin.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('table').styleTable();
		});
	</script>
	</textarea>
	
	<h2>Plugin Options</h2>
	I have tried to make option names self-explanatory. Here they are:
	
	<textarea name="code" class="javascript">
	// 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
	</textarea>
	
	Since this plugin is free/open source, you can go on to modifying/adding more options to the plugin.
	
   <h2>Examples</h2>
   
   <h4>&rarr; Table not using StyleTable plugin</h4>
   
	<table border="0" cellpadding="4" cellspacing="0" align="center" width="30%">
		<thead>
			<th align="left">Subject</th>
			<th align="center" width="30">View</th>
			<th align="center" width="30">Edit</th>
			<th align="center" width="30">Delete</th>
		</thead>
		
		<tr>
			<td align="left">Accounting</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Animation</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Anthropology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Archaeology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Architecture</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>

		<tr>
			<td align="left">Art</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		
	</table>

   <h4>&rarr; Table using StyleTable with default options</h4>

	<textarea name="code" class="javascript">
	$('table#table1').styleTable();
	</textarea>
   
	<table id="table1" border="0" cellpadding="4" cellspacing="0" align="center" width="30%">
		<thead>
			<th align="left">Subject</th>
			<th align="center" width="30">View</th>
			<th align="center" width="30">Edit</th>
			<th align="center" width="30">Delete</th>
		</thead>

		<tr>
			<td align="left">Accounting</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Animation</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Anthropology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Archaeology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Architecture</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>

		<tr>
			<td align="left">Art</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		
	</table>

   <h4>&rarr; Table using StyleTable with custom options - example 1</h4>

	<textarea name="code" class="javascript">
	$('table#table2').styleTable({
		th_bgcolor: '#3E83C9',
		th_color: '#ffffff',
		th_border_color: '#333333',
		tr_odd_bgcolor: '#ECF6FC',
		tr_even_bgcolor: '#ffffff',
		tr_border_color: '#95BCE2',
		tr_hover_bgcolor: '#BCD4EC'
	});
	</textarea>
   
	<table id="table2" border="0" cellpadding="4" cellspacing="0" align="center" width="30%">
		<thead>
			<th align="left">Subject</th>
			<th align="center" width="30">View</th>
			<th align="center" width="30">Edit</th>
			<th align="center" width="30">Delete</th>
		</thead>
		
		<tr>
			<td align="left">Accounting</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Animation</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Anthropology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Archaeology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Architecture</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>

		<tr>
			<td align="left">Art</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		
	</table>

   <h4>&rarr; Table using StyleTable with custom options - example 2</h4>

	<textarea name="code" class="javascript">
	$('table#table3').styleTable({
		th_bgcolor: '#B9C9FE',
		th_color: '#003399',
		th_border_color: '#003399',
		tr_odd_bgcolor: '#E8EDFF',
		tr_even_bgcolor: '#E8EDFF',
		tr_border_color: '#ffffff',
		tr_hover_bgcolor: '#D0DAFD'
	});
	</textarea>
   
	<table id="table3" border="0" cellpadding="4" cellspacing="0" align="center" width="30%">
		<thead>
			<th align="left">Subject</th>
			<th align="center" width="30">View</th>
			<th align="center" width="30">Edit</th>
			<th align="center" width="30">Delete</th>
		</thead>
		
		<tr>
			<td align="left">Accounting</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Animation</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Anthropology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Archaeology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Architecture</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>

		<tr>
			<td align="left">Art</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		
	</table>	

   <h4>&rarr; Table using StyleTable with custom options - example 3</h4>

	<textarea name="code" class="javascript">
	$('table#table4').styleTable({
		th_bgcolor: '#CDDFB5',
		th_border_color: '#4C5F3B',
		tr_odd_bgcolor: '#F2FFE1',
		tr_even_bgcolor: '#ffffff',
		tr_border_color: '#6E8F50',
		tr_hover_bgcolor: '#B4CF9B'
	});
	</textarea>
   
	<table id="table4" border="0" cellpadding="4" cellspacing="0" align="center" width="30%">
		<thead>
			<th align="left">Subject</th>
			<th align="center" width="30">View</th>
			<th align="center" width="30">Edit</th>
			<th align="center" width="30">Delete</th>
		</thead>
		
		<tr>
			<td align="left">Accounting</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Animation</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Anthropology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Archaeology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Architecture</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>

		<tr>
			<td align="left">Art</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		
	</table>	
	
   <h4>&rarr; Table using StyleTable with custom options - example 4</h4>

	<textarea name="code" class="javascript">
	$('table#table5').styleTable({
		th_bgcolor: '#BCD4EC',
		th_image: './images/center.jpg',
		th_color: '#000000',
		th_border_color: '#333333',
		tr_odd_image: './images/formbg.gif',
		tr_even_image: './images/hnav-a-bg-black.jpg',
		tr_hover_image: './images/s_bg.jpg',
		tr_even_color: '#ffffff',
		tr_border_color: '#cccccc'
	});
	</textarea>

	<table id="table5" border="0" cellpadding="4" cellspacing="0" align="center" width="30%">
		<thead>
			<th align="left">Subject</th>
			<th align="center" width="30">View</th>
			<th align="center" width="30">Edit</th>
			<th align="center" width="30">Delete</th>
		</thead>
		
		<tr>
			<td align="left">Accounting</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Animation</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Anthropology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Archaeology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Architecture</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>

		<tr>
			<td align="left">Art</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		
	</table>	


   <h4>&rarr; Table using StyleTable with custom options - example 5</h4>

	<textarea name="code" class="javascript">
	$('table#table6').styleTable({
		th_bgcolor: '#CDDFB5',
		th_border_color: '#4C5F3B',
		td_odd_bgcolor: '#ffffff',
		td_even_bgcolor: '#F2FFE1',
		td_hover_bgcolor: '#B4CF9B',
		tr_border_color: '#6E8F50'
	});
	</textarea>

	<table id="table6" border="0" cellpadding="4" cellspacing="0" align="center" width="30%">
		<thead>
			<th align="left">Subject</th>
			<th align="center" width="30">View</th>
			<th align="center" width="30">Edit</th>
			<th align="center" width="30">Delete</th>
		</thead>
		
		<tr>
			<td align="left">Accounting</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Animation</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Anthropology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Archaeology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Architecture</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>

		<tr>
			<td align="left">Art</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		
	</table>	

   <h4>&rarr; Table using StyleTable with custom options - example 6</h4>

	<textarea name="code" class="javascript">
	$('table#table7').styleTable({
		th_image: './images/bg_hover.png',
		td_odd_image: './images/bg.jpg',
		td_even_image: './images/formbg.gif',
		td_hover_image: './images/bg_topbar.gif'
	});
	</textarea>

	<table id="table7" border="0" cellpadding="4" cellspacing="0" align="center" width="30%">
		<thead>
			<th align="left">Subject</th>
			<th align="center" width="30">View</th>
			<th align="center" width="30">Edit</th>
			<th align="center" width="30">Delete</th>
		</thead>
		
		<tr>
			<td align="left">Accounting</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Animation</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Anthropology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Archaeology</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		<tr>
			<td align="left">Architecture</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>

		<tr>
			<td align="left">Art</td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/magnifier.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/page_white_edit.png" border="0"></a></td>
			<td align="center"><a href="#" onclick="return false;"><img src="./images/publish_r.png" border="0"></a></td>
		</tr>
		
	</table>	
	
  	<br /><br />
	
		<br /><br />
		<!--<hr width="750" />-->
		<p align="center">
			返回 <a href="http://13141618.taobao.com/" style="color:#FF0066; font-weight:bold; text-decoration:none;">程序员设计师联盟淘宝店</a><br />


<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript" src="shBrushJScript.js"></script>
<script type="text/javascript" src="shBrushXml.js"></script>
<script type="text/javascript">
	dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

JS代码(shCore.js):

/* * JsMin * Javascript Compressor * http://www.crockford.com/ * http://www.smallsharptools.com/*/
var dp={
	sh:{
	Toolbar:{
}
,Utils:{
}
,RegexLib:{
}
,Brushes:{
}
,Strings:{
	AboutDialog:'<html><head><title>About...</title></head><body class="dp-about"><table cellspacing="0"><tr><td class="copy"><p class="title">dp.SyntaxHighlighter</div><div class="para">Version:{
	V}
</p><p><a href="http://www.dreamprojections.com/syntaxhighlighter/?ref=about" target="_blank">http://www.dreamprojections.com/syntaxhighlighter</a></p>&copy;
	2004-2007 Alex Gorbatchev.</td></tr><tr><td class="footer"><input type="button" class="close" value="OK" onClick="window.close()"/></td></tr></table></body></html>'}
,ClipboardSwf:null,Version:'1.5.1'}
}
;
	dp.SyntaxHighlighter=dp.sh;
	dp.sh.Toolbar.Commands={
	ExpandSource:{
	label:'+ expand source',check:function(highlighter){
	return highlighter.collapse;
}
,func:function(sender,highlighter){
	sender.parentNode.removeChild(sender);
	highlighter.div.className=highlighter.div.className.replace('collapsed','');
}
}
,ViewSource:{
	label:'view plain',func:function(sender,highlighter){
	var code=dp.sh.Utils.FixForBlogger(highlighter.originalCode).replace(/</g,'&lt;
	');
	var wnd=window.open('','_blank','width=750,height=400,location=0,resizable=1,menubar=0,scrollbars=0');
	wnd.document.write('<textarea style="width:99%;
	height:99%">'+code+'</textarea>');
	wnd.document.close();
}
}
,CopyToClipboard:{
	label:'copy to clipboard',check:function(){
	return window.clipboardData!=null||dp.sh.ClipboardSwf!=null;
}
,func:function(sender,highlighter){
	var code=dp.sh.Utils.FixForBlogger(highlighter.originalCode).replace(/&lt;
	/g,'<').replace(/&gt;
	/g,'>').replace(/&amp;
	/g,'&');
	if(window.clipboardData){
	window.clipboardData.setData('text',code);
}
else if(dp.sh.ClipboardSwf!=null){
	var flashcopier=highlighter.flashCopier;
	if(flashcopier==null){
	flashcopier=document.createElement('div');
	highlighter.flashCopier=flashcopier;
	highlighter.div.appendChild(flashcopier);
}
flashcopier.innerHTML='<embed src="'+dp.sh.ClipboardSwf+'" FlashVars="clipboard='+encodeURIComponent(code)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
}
alert('The code is in your clipboard now');
}
}
,PrintSource:{
	label:'print',func:function(sender,highlighter){
	var iframe=document.createElement('IFRAME');
	var doc=null;
	iframe.style.cssText='position:absolute;
	width:0px;
	height:0px;
	left:-500px;
	top:-500px;
	';
	document.body.appendChild(iframe);
	doc=iframe.contentWindow.document;
	dp.sh.Utils.CopyStyles(doc,window.document);
	doc.write('<div class="'+highlighter.div.className.replace('collapsed','')+' printing">'+highlighter.div.innerHTML+'</div>');
	doc.close();
	iframe.contentWindow.focus();
	iframe.contentWindow.print();
	alert('Printing...');
	document.body.removeChild(iframe);
}
}
,About:{
	label:'?',func:function(highlighter){
	var wnd=window.open('','_blank','dialog,width=300,height=150,scrollbars=0');
	var doc=wnd.document;
	dp.sh.Utils.CopyStyles(doc,window.document);
	doc.write(dp.sh.Strings.AboutDialog.replace('{
	V}
',dp.sh.Version));
	doc.close();
	wnd.focus();
}
}
}
;
	dp.sh.Toolbar.Create=function(highlighter){
	var div=document.createElement('DIV');
	div.className='tools';
	for(var name in dp.sh.Toolbar.Commands){
	var cmd=dp.sh.Toolbar.Commands[name];
	if(cmd.check!=null&&!cmd.check(highlighter))continue;
	div.innerHTML+='<a href="#" onclick="dp.sh.Toolbar.Command(\''+name+'\',this);
	return false;
	">'+cmd.label+'</a>';
}
return div;
}
dp.sh.Toolbar.Command=function(name,sender){
	var n=sender;
	while(n!=null&&n.className.indexOf('dp-highlighter')==-1)n=n.parentNode;
	if(n!=null)dp.sh.Toolbar.Commands[name].func(sender,n.highlighter);
}
dp.sh.Utils.CopyStyles=function(destDoc,sourceDoc){
	var links=sourceDoc.getElementsByTagName('link');
	for(var i=0;
	i<links.length;
	i++)if(links[i].rel.toLowerCase()=='stylesheet')destDoc.write('<link type="text/css" rel="stylesheet" href="'+links[i].href+'"></link>');
}
dp.sh.Utils.FixForBlogger=function(str){
	return(dp.sh.isBloggerMode==true)?str.replace(/<br\s*\/?>|&lt;
	br\s*\/?&gt;
	/gi,'\n'):str;
}
dp.sh.RegexLib={
	MultiLineCComments:new RegExp('/\\*[\\s\\S]*?\\*/
','gm'),SingleLineCComments:new RegExp('//.*$','gm'),SingleLinePerlComments:new RegExp('#.*$','gm'),DoubleQuotedString:new RegExp('"(?:\\.|(\\\\\\")|[^\\""\\n])*"','g'),SingleQuotedString:new RegExp("'(?:\\.|(\\\\\\')|[^\\''\\n])*'",'g')}
;
	dp.sh.Match=function(value,index,css){
	this.value=value;
	this.index=index;
	this.length=value.length;
	this.css=css;
}
dp.sh.Highlighter=function(){
	this.noGutter=false;
	this.addControls=true;
	this.collapse=false;
	this.tabsToSpaces=true;
	this.wrapColumn=80;
	this.showColumns=true;
}
dp.sh.Highlighter.SortCallback=function(m1,m2){
	if(m1.index<m2.index)return-1;
	else if(m1.index>m2.index)return 1;
	else{
	if(m1.length<m2.length)return-1;
	else if(m1.length>m2.length)return 1;
}
return 0;
}
dp.sh.Highlighter.prototype.CreateElement=function(name){
	var result=document.createElement(name);
	result.highlighter=this;
	return result;
}
dp.sh.Highlighter.prototype.GetMatches=function(regex,css){
	var index=0;
	var match=null;
	while((match=regex.exec(this.code))!=null)this.matches[this.matches.length]=new dp.sh.Match(match[0],match.index,css);
}
dp.sh.Highlighter.prototype.AddBit=function(str,css){
	if(str==null||str.length==0)return;
	var span=this.CreateElement('SPAN');
	str=str.replace(/ /g,'&nbsp;
	');
	str=str.replace(/</g,'&lt;
	');
	str=str.replace(/\n/gm,'&nbsp;
	<br>');
	if(css!=null){
	if((/br/gi).test(str)){
	var lines=str.split('&nbsp;
	<br>');
	for(var i=0;
	i<lines.length;
	i++){
	span=this.CreateElement('SPAN');
	span.className=css;
	span.innerHTML=lines[i];
	this.div.appendChild(span);
	if(i+1<lines.length)this.div.appendChild(this.CreateElement('BR'));
}
}
else{
	span.className=css;
	span.innerHTML=str;
	this.div.appendChild(span);
}
}
else{
	span.innerHTML=str;
	this.div.appendChild(span);
}
}
dp.sh.Highlighter.prototype.IsInside=function(match){
	if(match==null||match.length==0)return false;
	for(var i=0;
	i<this.matches.length;
	i++){
	var c=this.matches[i];
	if(c==null)continue;
	if((match.index>c.index)&&(match.index<c.index+c.length))return true;
}
return false;
}
dp.sh.Highlighter.prototype.ProcessRegexList=function(){
	for(var i=0;
	i<this.regexList.length;
	i++)this.GetMatches(this.regexList[i].regex,this.regexList[i].css);
}
dp.sh.Highlighter.prototype.ProcessSmartTabs=function(code){
	var lines=code.split('\n');
	var result='';
	var tabSize=4;
	var tab='\t';
	function InsertSpaces(line,pos,count){
	var left=line.substr(0,pos);
	var right=line.substr(pos+1,line.length);
	var spaces='';
	for(var i=0;
	i<count;
	i++)spaces+=' ';
	return left+spaces+right;
}
function ProcessLine(line,tabSize){
	if(line.indexOf(tab)==-1)return line;
	var pos=0;
	while((pos=line.indexOf(tab))!=-1){
	var spaces=tabSize-pos%tabSize;
	line=InsertSpaces(line,pos,spaces);
}
return line;
}
for(var i=0;
	i<lines.length;
	i++)result+=ProcessLine(lines[i],tabSize)+'\n';
	return result;
}
dp.sh.Highlighter.prototype.SwitchToList=function(){
	var html=this.div.innerHTML.replace(/<(br)\/?>/gi,'\n');
	var lines=html.split('\n');
	if(this.addControls==true)this.bar.appendChild(dp.sh.Toolbar.Create(this));
	if(this.showColumns){
	var div=this.CreateElement('div');
	var columns=this.CreateElement('div');
	var showEvery=10;
	var i=1;
	while(i<=150){
	if(i%showEvery==0){
	div.innerHTML+=i;
	i+=(i+'').length;
}
else{
	div.innerHTML+='&middot;
	';
	i++;
}
}
columns.className='columns';
	columns.appendChild(div);
	this.bar.appendChild(columns);
}
for(var i=0,lineIndex=this.firstLine;
	i<lines.length-1;
	i++,lineIndex++){
	var li=this.CreateElement('LI');
	var span=this.CreateElement('SPAN');
	li.className=(i%2==0)?'alt':'';
	span.innerHTML=lines[i]+'&nbsp;
	';
	li.appendChild(span);
	this.ol.appendChild(li);
}
this.div.innerHTML='';
}
dp.sh.Highlighter.prototype.Highlight=function(code){
	function Trim(str){
	return str.replace(/^\s*(.*?)[\s\n]*$/g,'$1');
}
function Chop(str){
	return str.replace(/\n*$/,'').replace(/^\n*/
,'');
}
function Unindent(str){
	var lines=dp.sh.Utils.FixForBlogger(str).split('\n');
	var indents=new Array();
	var regex=new RegExp('^\\s*','g');
	var min=1000;
	for(var i=0;
	i<lines.length&&min>0;
	i++){
	if(Trim(lines[i]).length==0)continue;
	var matches=regex.exec(lines[i]);
	if(matches!=null&&matches.length>0)min=Math.min(matches[0].length,min);
}
if(min>0)for(var i=0;
	i<lines.length;
	i++)lines[i]=lines[i].substr(min);
	return lines.join('\n');
}
function Copy(string,pos1,pos2){
	return string.substr(pos1,pos2-pos1);
}
var pos=0;
	if(code==null)code='';
	this.originalCode=code;
	this.code=Chop(Unindent(code));
	this.div=this.CreateElement('DIV');
	this.bar=this.CreateElement('DIV');
	this.ol=this.CreateElement('OL');
	this.matches=new Array();
	this.div.className='dp-highlighter';
	this.div.highlighter=this;
	this.bar.className='bar';
	this.ol.start=this.firstLine;
	if(this.CssClass!=null)this.ol.className=this.CssClass;
	if(this.collapse)this.div.className+=' collapsed';
	if(this.noGutter)this.div.className+=' nogutter';
	if(this.tabsToSpaces==true)this.code=this.ProcessSmartTabs(this.code);
	this.ProcessRegexList();
	if(this.matches.length==0){
	this.AddBit(this.code,null);
	this.SwitchToList();
	this.div.appendChild(this.bar);
	this.div.appendChild(this.ol);
	return;
}
this.matches=this.matches.sort(dp.sh.Highlighter.SortCallback);
	for(var i=0;
	i<this.matches.length;
	i++)if(this.IsInside(this.matches[i]))this.matches[i]=null;
	for(var i=0;
	i<this.matches.length;
	i++){
	var match=this.matches[i];
	if(match==null||match.length==0)continue;
	this.AddBit(Copy(this.code,pos,match.index),null);
	this.AddBit(match.value,match.css);
	pos=match.index+match.length;
}
this.AddBit(this.code.substr(pos),null);
	this.SwitchToList();
	this.div.appendChild(this.bar);
	this.div.appendChild(this.ol);
}
dp.sh.Highlighter.prototype.GetKeywords=function(str){
	return'\\b'+str.replace(/ /g,'\\b|\\b')+'\\b';
}
dp.sh.BloggerMode=function(){
	dp.sh.isBloggerMode=true;
}
dp.sh.HighlightAll=function(name,showGutter,showControls,collapseAll,firstLine,showColumns){
	function FindValue(){
	var a=arguments;
	for(var i=0;
	i<a.length;
	i++){
	if(a[i]==null)continue;
	if(typeof(a[i])=='string'&&a[i]!='')return a[i]+'';
	if(typeof(a[i])=='object'&&a[i].value!='')return a[i].value+'';
}
return null;
}
function IsOptionSet(value,list){
	for(var i=0;
	i<list.length;
	i++)if(list[i]==value)return true;
	return false;
}
function GetOptionValue(name,list,defaultValue){
	var regex=new RegExp('^'+name+'\\[(\\w+)\\]$','gi');
	var matches=null;
	for(var i=0;
	i<list.length;
	i++)if((matches=regex.exec(list[i]))!=null)return matches[1];
	return defaultValue;
}
function FindTagsByName(list,name,tagName){
	var tags=document.getElementsByTagName(tagName);
	for(var i=0;
	i<tags.length;
	i++)if(tags[i].getAttribute('name')==name)list.push(tags[i]);
}
var elements=[];
	var highlighter=null;
	var registered={
}
;
	var propertyName='innerHTML';
	FindTagsByName(elements,name,'pre');
	FindTagsByName(elements,name,'textarea');
	if(elements.length==0)return;
	for(var brush in dp.sh.Brushes){
	var aliases=dp.sh.Brushes[brush].Aliases;
	if(aliases==null)continue;
	for(var i=0;
	i<aliases.length;
	i++)registered[aliases[i]]=brush;
}
for(var i=0;
	i<elements.length;
	i++){
	var element=elements[i];
	var options=FindValue(element.attributes['class'],element.className,element.attributes['language'],element.language);
	var language='';
	if(options==null)continue;
	options=options.split(':');
	language=options[0].toLowerCase();
	if(registered[language]==null)continue;
	highlighter=new dp.sh.Brushes[registered[language]]();
	element.style.display='none';
	highlighter.noGutter=(showGutter==null)?IsOptionSet('nogutter',options):!showGutter;
	highlighter.addControls=(showControls==null)?!IsOptionSet('nocontrols',options):showControls;
	highlighter.collapse=(collapseAll==null)?IsOptionSet('collapse',options):collapseAll;
	highlighter.showColumns=(showColumns==null)?IsOptionSet('showcolumns',options):showColumns;
	var headNode=document.getElementsByTagName('head')[0];
	if(highlighter.Style&&headNode){
	var styleNode=document.createElement('style');
	styleNode.setAttribute('type','text/css');
	if(styleNode.styleSheet){
	styleNode.styleSheet.cssText=highlighter.Style;
}
else{
	var textNode=document.createTextNode(highlighter.Style);
	styleNode.appendChild(textNode);
}
headNode.appendChild(styleNode);
}
highlighter.firstLine=(firstLine==null)?parseInt(GetOptionValue('firstline',options,1)):firstLine;
	highlighter.Highlight(element[propertyName]);
	highlighter.source=element;
	element.parentNode.insertBefore(highlighter.div,element);
}
}

附件:下载该文件资源,减少时间成本(增值服务)