Javascript绘制表格斜线实现课程表效果

在利用HTML设计客户端表格界面时,表头左上角有时候可能要实现类似课程表加斜线的效果,以便指明横栏和竖栏的名称。 Graphics capabilities for JavaScript是一个矢量绘制基本图形的Javascript库,利用它,你可以在页面中绘制线段,圆,椭圆,方形,星状图甚至饼图。

使用它也非常简单,首先在HTML的head中引用其提供的js文件,然后在要绘制图形的地方,定义一个 div区域,在其中实例化相应的图形对象,设置图形的颜色,坐标位置,调用对象的 paint()方法,就完成了图形的绘制。

下面以我们都很熟悉的课程表为例,介绍斜线的绘制过程。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<head>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>					
      <title>Javascript table example.</title>
      <script type="text/javascript" src="script/wz_jsgraphics.js"></script>
      <style>
      	#table {
      		margin: 0px; 
      		padding:0px; 
      		border-collapse: collapse;
      		table-layout:fixed; border: 
      		solid 1px maroon; 
      	}
      	.table_td {
		border: solid 1px maroon;
		text-align: center;
	    }
	</style>
	</head>
<body>
	<!-- 定义绘制图形的区域,调用jsGraphics提供的对象及相关的方法以完成斜线的绘制 -->
	<div id="Canvas" style="position:relative;height:5px;width:5px;"></div>
	<script type="text/javascript">
		var jg = new jsGraphics("Canvas");  
		jg.setColor("maroon");
	    jg.drawLine(0, 5, 95, 45); 
		jg.paint();
	</script> 
	    <table id="table">
	    	<thead>
		    		<tr>
			    		<td style="padding-top:20px;width:50px;">节次</td>
			    		<td style="padding-bottom:20px;width:40px;"">星期</td>
			    		<td class="table_td">一</td>
			    		<td class="table_td">二</td>
			    		<td class="table_td">三</td>
			    		<td class="table_td">四</td>
			    		<td class="table_td">五</td>
		    		</tr>
	    		</thead>
	    	<tbody>
	    		<tr>
	    			<td rowspan="5" class="table_td">上午</td>
	    		</tr>
	    		<tr>
	    			<td class="table_td">1</td>
	    			<td rowspan="2" class="table_td">理论</td>
	    			<td rowspan="2" class="table_td">实践</td>
	    			<td rowspan="2" class="table_td">数学</td>
	    			<td rowspan="2" class="table_td">理论</td>
	    			<td rowspan="2" class="table_td">数学</td>
	    		</tr>
	    		<tr>
	    			<td class="table_td">2</td>
	    		</tr>			    		
	    		<tr>
	    			<td  class="table_td">3</td>
	    			<td rowspan="2" class="table_td">实践</td>
	    			<td rowspan="2" class="table_td">理论</td>
	    			<td rowspan="2" class="table_td">英语</td>
	    			<td rowspan="2" class="table_td">语文</td>
	    			<td rowspan="2" class="table_td">实践</td>
	    		</tr>	
	    		<tr>
	    			<td class="table_td">4</td>
	    		</tr>
	    		<tr>
	    			<td rowspan="4" class="table_td">下午</td>
	    		</tr>			    		
	    		<tr>
	    			<td class="table_td">5</td>
	    			<td rowspan="2" class="table_td">实践</td>
	    			<td rowspan="2" class="table_td">英语</td>
	    			<td rowspan="2" class="table_td">理论</td>
	    			<td rowspan="2" class="table_td">数学</td>
	    			<td rowspan="2" class="table_td">英语</td>
	    		</tr>			    		
	    		<tr>
	    			<td class="table_td">6</td>
	    		</tr>			    		
	    		<tr>
	    			<td class="table_td">7</td>
	    			<td class="table_td">语文</td>
	    			<td class="table_td">理论</td>
	    			<td class="table_td">语文</td>
	    			<td class="table_td">理论</td>
	    			<td class="table_td">实践</td>
	    		</tr>			    		
	    		<tr>
	    			<td colspan="2" class="table_td">晚自习</td>
	    			<td class="table_td">数学</td>
	    			<td class="table_td">语文</td>
	    			<td class="table_td">理论</td>
	    			<td class="table_td">实践</td>
	    			<td class="table_td">英语</td>
	    		</tr>			    		
	    	</tbody>
	    </table>
	  </body>
	</html>
			    			


参考资料:

1. 到 jsGraphics站点下载和参考相关文档。

你可能感兴趣的:(JavaScript,html,XHTML)