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

最新推荐文章于 2021-03-17 22:51:04 发布

iteye_7201

最新推荐文章于 2021-03-17 22:51:04 发布

阅读量911

点赞数

分类专栏： Ajax 文章标签： JavaScript HTML XHTML ViewUI

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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



<!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>

[b]参考资料:[/b]

1. 到[url=http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm]jsGraphics站点[/url]下载和参考相关文档。

iteye_7201

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript绘制表格斜线实现课程表效果

在利用HTML设计客户端表格界面时，表头左上角有时候可能要实现类似课程表加斜线的效果，以便指明横栏和竖栏的名称。[b]Graphics capabilities for JavaScript[/b]是一个矢量绘制基本图形的Javascript库，利用它，你可以在页面中绘制线段，圆，椭圆，方形，星状图甚至饼图。使用它也非常简单，首先在HTML的head中引用其提供的js文件，然后在要绘制图形...
复制链接

扫一扫