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 通用简单的table选项卡实现
May 07 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
js清空form表单中的内容示例
May 20 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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
php 读取shell管道传输过来的内容
2010/03/01 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
jquery五角星评分插件示例分享
2014/02/21 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python中的rfind()方法使用详解
2015/05/19 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
Python Pillow Image Invert
2019/01/22 Python
python命令 -u参数用法解析
2019/10/24 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
pandas分组聚合详解
2020/04/10 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
JPA面试常见问题
2016/11/14 面试题
EJB的激活机制
2013/10/25 面试题
高中物理教学反思
2014/02/08 职场文书
企业员工薪酬方案
2014/06/04 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS