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

Javascript
JS getMonth()日期函数的值域是0-11
jQuery 处理网页内容的实现代码
jQuery 树形结构的选择器
jQuery 处理表单元素的代码
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
JavaScript 10件让人费解的事情
类似GMAIL的Ajax信息反馈显示
两个比较有用的Javascript工具函数代码
JavaScript Timer实现代码
JavaScript 学习技巧
JavaScript 题型问答有答案参考
js删除select中重复项的实现代码
javascript中的链式调用
JavaScript DOM学习第一章 W3C DOM简介
JavaScript DOM 学习第二章 编辑文本
JavaScript DOM 学习第三章 内容表格
JavaScript DOM学习第四章 getElementByTagNames
JavaScript DOM 学习第五章 表单简介
JavaScript DOM学习第六章 表单实例
JavaScript DOM 学习第七章 表单的扩展

No. « 287 288 289 290 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 33 ::
收藏到网摘: 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>