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

Javascript
一个特殊的排序需求的javascript实现代码
javaScript 简单验证代码（用户名，密码，邮箱)
支持ie与FireFox的剪切板操作代码
使用JS判断是否数字和小数点组合的数字的两中方法比较(isNaN和逐判断)
javascript 表单验证常见正则
IE FF OPERA都可用的弹出层实现代码
PPK 谈 JavaScript 的 this 关键字 [翻译]
JavaScript 自动在表格前面增加序号
点击按钮后 文本框变为Select下拉列表框
js类的静态属性和实例属性的理解
点击文章内容处弹出页面代码
点击下载链接 弹出页面实现代码
签名框（Textarea）限制文字数量并适时提示
JavaScript CSS 通用循环滚动条
js removeChild 障眼法 可能出现的错误
面向对象的javascript（笔记）
JavaScript 浮点数运算 精度问题
JavaScript 接收键盘指令示例
CSS 美化表格边框为凹陷立体效果的实现方法
JavaScript 控制文本框的值连续加减

No. « 187 188 189 190 »

技术文章搜索

关键字

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

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