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

Javascript
javascript模仿msgbox提示效果代码
javascript table美化鼠标滑动单元格变色
告诉大家什么是JSON
json 定义
json跟xml的对比分析
jQuery实用技巧
JQuery实现自定义对话框的代码
强烈推荐240多个jQuery插件提供下载
豆瓣网的jquery代码实例
使用 JavaScript 创建可维护的幻灯片效果代码
动感超强的JS图片轮换特效
一个小型js框架myJSFrame附API使用帮助
Javascript入门学习第二篇 js类型
Javascript入门学习第三篇 js运算
Javascript入门学习第四篇 js对象和数组
jQuery基础教程笔记适合js新手
图片自动缩小 点击放大
非常不错的功能强大代码简单的管理菜单美化版
js 新浪的一个图片播放图片轮换效果代码
javascript import css实例代码

No. « 209 210 211 212 »

技术文章搜索

关键字

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

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