javascript 对表格的行和列都能加亮显示


Posted in Javascript onDecember 26, 2008

1,交叉加亮
2,点击左上角的 "1;1","2;2"观察所有单元值的变化
3,点击左上角的 "3,3","4,4"观察所有单元字体的变化
4,点击单元后,该单元颜色发生变化,并直至点击下一单元
5,将th与td分开;
Gu Laicheng, 2008.12.25
<HTML>
<HEAD>
<TITLE>交叉高亮显示</TITLE>
<style>
body,th,td
{
font-size: 10pt;
}
.Tlist1
{
border-collapse:collapse;table-layout:fixed;width:710px;
}
.outit
{
background: #EEDDFF;
}
.ovrit
{
background: #AADDFF;
}
.cross
{
background: #33DDFF;
}
.clkit
{
background: #DDAAAA;
}
.clkcr
{
background: #AA7777;
}
.titl
{
background: #77AAFF;
}
</style>
</HEAD>
<BODY>
<table id="table3" border="1" cellpadding=4 cellspacing=0 bordercolor='#3377FF' align=center class=Tlist1 id=Tlist1>
<script>
var Nrow = 15,Ncol = 12;
document.writeln("<tr class='titl'>");
for (var c=0;c<Ncol;c++ )
{
document.writeln("<th>F"+(c+1)+"</th>");
}
document.writeln("</tr>");
for (var r=0;r<Nrow;r++ )
{
document.writeln("<tr>");
for (var c=0;c<Ncol;c++ )
{
document.writeln("<td class='outit'>"+(r+1)+";"+(c+1)+"</td>");
}
document.writeln("</tr>");
}
</script>
</table>
</BODY>
<script>
var currentRow,currentCol;
table3.rows[1].cells[0].onclick = function(){init(0);}
table3.rows[2].cells[1].onclick = function(){init(1);}
table3.rows[3].cells[2].onclick = function(){ccssty(0);}
table3.rows[4].cells[3].onclick = function(){ccssty(1);}
table3.rows[1].cells[0].style.cursor = "hand"
table3.rows[2].cells[1].style.cursor = "hand"
table3.rows[3].cells[2].style.cursor = "hand"
table3.rows[4].cells[3].style.cursor = "hand"
table3.onmouseover = new Function("var d='over'; moveit(d);");
table3.onmouseout = new Function("var d='out'; moveit(d);");
table3.onclick = clickit;
init(0);
function get_Element(the_ele,the_tag){
the_tag = the_tag.toLowerCase();
if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
while(the_ele=the_ele.offsetParent){
if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
}
return(null);
}
function setHorizontal(r,c,cn)
{
for (var i=0;i<table3.rows[r].cells.length ;i++)
{
table3.rows[r].cells[i].className = cn;
}
}
function setVertical(r,c,cn)
{
for (var i=1;i<table3.rows.length ;i++) // i starts from 0 because of TH
{
table3.rows[i].cells[c].className = cn;
}
}
function clickit(){
if (currentRow == 0)
{
return;
}
var cl = parseInt(clickl.innerText),
cc = parseInt(clickc.innerText);
if (cl+"" != "NaN" && cc+"" != "NaN") {
setVertical(currentRow,cc-1,"outit");
setHorizontal(cl,currentCol,"outit");
}
//Vertical Cells
setVertical(currentRow,currentCol-1,"clkit");
//Horizontal Cells
setHorizontal(currentRow,currentCol-1,"clkit");
//The color at the cross point
table3.rows[currentRow].cells[currentCol-1].className = "clkcr";
clickl.innerText = currentRow + "/"+Nrow
clickc.innerText = currentCol + "/"+Ncol
window.status = "Click on "+currentRow+","+currentCol;
}
function moveit(dir){
var the_obj = event.srcElement;
if(the_obj.tagName.toLowerCase() == "table") return;
if(the_obj.tagName.toLowerCase() == "th")
{
var the_td = get_Element(the_obj,"th");
} else
{
var the_td = get_Element(the_obj,"td");
}
var the_tr = the_td.parentElement;
currentRow = the_tr.rowIndex ;
currentCol = the_td.cellIndex+1 ;
//Vertical Cells
setVertical(currentRow,currentCol-1,(dir=="over")?"ovrit":"outit");
//Do not set horizontal cells when the cursor is on TH
if (currentRow>0)
{
//Horizontal Cells
setHorizontal(currentRow,currentCol-1,(dir=="over")?"ovrit":"outit");
//The color at the cross point
the_tr.cells[currentCol-1].className = (dir=="over")?"cross":"outit";
var cl = parseInt(clickl.innerText),
cc = parseInt(clickc.innerText);
if (cl+"" != "NaN" && cc+"" != "NaN") {
table3.rows[cl].cells[cc-1].className = "clkcr";
}
}
cline.innerText = currentRow + "/"+Nrow
ccell.innerText = currentCol + "/"+Ncol
}
function init(f){
var val = new Array();
var the_obj = event.srcElement;
var ii = jj = 0;
var the_table = get_Element(the_obj,"table");
ii = the_table.rows.length;
jj = the_table.rows[0].cells.length
for(i=1;i<ii;i++){
for(j=0;j<jj;j++){
the_table.rows[i].cells[j].innerText= (f==0)?(""+((i-1)*jj+j+1)):(""+i+";"+(j+1)) ;
}
}
}
function ccssty(flag){
var the_obj = event.srcElement;
var the_table = get_Element(the_obj,"table");
if(flag==0)
the_table.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 14px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 710px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: 宋体; HEIGHT: 11px";
if(flag==1)
the_table.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 14px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 710px; COLOR: #AAAA00; PADDING-TOP: 0px; FONT-FAMILY: 宋体; HEIGHT: 11px";
}
</script>
当前行:<span id=cline></span><br/>
当前列:<span id=ccell></span><br/>
点击行:<span id=clickl></span><br/>
点击列:<span id=clickc></span><br/>
</HTML>

Javascript 相关文章推荐
利用javascript判断文件是否存在
Dec 31 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
H5上传本地图片并预览功能
May 08 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
JavaScript 仿关机效果的图片层
Dec 26 #Javascript
jquery 插件 任意位置浮动固定层
Dec 25 #Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 #Javascript
jquery 图片预加载 自动等比例缩放插件
Dec 25 #Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 #Javascript
ASP SQL防注入的方法
Dec 25 #Javascript
jQuery 位置插件
Dec 25 #Javascript
You might like
一个更简单的无限级分类菜单代码
2007/01/16 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
php实现读取超大文件的方法
2014/07/28 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
详解Python3定时器任务代码
2019/09/23 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
什么是URL
2015/12/13 面试题
《祁黄羊》教学反思
2014/04/22 职场文书
班级团队活动方案
2014/08/14 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
公司岗位说明书
2015/10/08 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
Java 在线考试云平台的实现
2021/11/23 Java/Android