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

longgue

浏览: 101746 次
性别:
来自: 西安

最近访客更多访客>>

iptcp

JsonLi0929

acm365

流不驻的记忆

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

JavaScript HTML XHTML

在利用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站点下载和参考相关文档。

4
顶

0
踩

分享到：