当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 对表格的行和列都能加亮显示

Javascript
用Javascript实现锚点(Anchor)间平滑跳转
实现png图片和png背景透明（支持多浏览器）的方法
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
用DIV完美模拟createPopup 弹出窗口(修正版)，支持Firefox,ie,chrome
JavaScript 中级笔记 第一章
IE与Firefox在JavaScript上的7个不同写法小结
MooTools 1.2介绍
Mootools 1.2教程(2) DOM选择器
Mootools 1.2教程(3) 数组使用简介
在IE下获取object（ActiveX）的Param的代码
ExtJS 配置和表格控件使用
javascript 缓冲效果实现代码 推荐
html数组字符串拼接的最快方法
JavaScript 浮动定位提示效果实现代码
类似CSDN图片切换效果脚本
javascript 面向对象编程 function也是类
javascript 面向对象编程 聊聊对象的事
javascript 面向对象编程 function是方法(函数)
[原创]基于innerHTML中的script广告实现代码[广告全部放在一个js里面]
jQuery slider Content(左右控制移动)

No. « 226 227 228 229 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 164 ::
收藏到网摘: n/a

对表格的行和列都能加亮显示，而且点击单元格后会有更不同的表现... 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>