新手求救：table中行、列的高亮显示？

谢谢回复！
但是没有那么简单，是要写js来获取行列。我仔细说下需求：
1.点击row header,整行高亮；
2.点击colum header,整列高亮；
3.点击中间的cell,所在row header和colum header高亮；
4.ctrl+shift选多行多列时，所选区域高亮；
其实就是和Excel一样的效果。

在asp中还没有这样实现过这样的功能在.net中就可以实现！

<table border="1" id="table1">
<tr >
<td>
df</td>
<td>
sdf
</td>
<td >
sdfd
</td>
</tr>
<tr >
<td>
sdf</td>
<td>
asdasd
</td>
<td>
asdasd
</td>
</tr>
<tr >
<td>
dsf</td>
<td>
asdasd
</td>
<td>
asdasd
</td>
</tr>
</table>
<script language=javascript>
obj=document.getElementById("table1").childNodes[0]
for(var i=0;i<obj.childNodes.length;i++)
{
for(var j=0;j<obj.childNodes[i].childNodes.length;j++)
{
obj.childNodes[i].childNodes[j].onclick=function()
{
var obj=document.getElementById("table1").childNodes[0]
for(var i=0;i<obj.childNodes.length;i++)
{
for(var j=0;j<obj.childNodes[i].childNodes.length;j++)
{
if((j==event.srcElement.cellIndex)||(i==event.srcElement.parentNode.rowIndex))
{
obj.childNodes[i].childNodes[j].style.backgroundColor="blue"
}
else
{
obj.childNodes[i].childNodes[j].style.backgroundColor="white"
}
}
}

}
}
}

</script>

谢谢楼上的兄弟！看来是JS高手了！
我试过了，其实跟我的需求还有点出入，可能是我没交代清楚。给出一个table:
  <table border="1" id="table1">
     <tr>
<td></td>
<td>A</td>
<td>B</td>
     </tr>
     <tr>
<td>1</td>
<td>asa</td>
<td>fdfs</td>
     </tr>
     <tr>
        <td>2</td>
<td>fdf</td>
<td>fds</td>
     </tr>
</table>
A，B是列标题；1,2是行标题
实现：1.点击A，A所在列高亮；
      2.点击1，1所在行高亮；
      3.点击中间cell的"asa"，A和1这两个格高亮，也就是这个cell所在行列的标题；
      4.按下“ctrl”同时选中"asa","fdfs",那么A，B，1这三个cell高亮；
和excel中实现的功能其实是一样的！

我做了一个单击一列,整列变成红色的把这段代码复制到body标签里面吧
<table id="myTable" width="500" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>22</td>
    <td>44</td>
    <td>55</td>
  </tr>
  <tr>
    <td>33</td>
    <td>55</td>
    <td>55</td>
  </tr>
  <tr>
    <td>434</td>
    <td>55</td>
    <td>55</td>
  </tr>
</table>
<script language="javascript">cellNewIndex=0;
document.onclick=function()
{

    var cellOldIndex=cellNewIndex;

    e=window.event.srcElement;
if (e.tagName=="TD")
{
//取得表格的行数
rowCount=document.getElementById("myTable").rows.length;
//获得当前点击的列的索引值

cellNewIndex=e.cellIndex;

     for(i=0;i<rowCount;i++)
{

document.getElementById("myTable").rows(i).cells(cellOldIndex).style.backgroundColor="";
document.getElementById("myTable").rows(i).cells(cellNewIndex).style.backgroundColor="red";
}
}
}
</script>

谢谢楼上的兄弟！看来是JS高手了！
我试过了，其实跟我的需求还有点出入，可能是我没交代清楚。给出一个table:
  <table border="1" id="table1">
     <tr>
<td></td>
<td>A</td>
<td>B</td>
     </tr>
     <tr>
<td>1</td>
<td>asa</td>
<td>fdfs</td>
     </tr>
     <tr>
        <td>2</td>
<td>fdf</td>
<td>fds</td>
     </tr>
</table>
A，B是列标题；1,2是行标题
实现：1.点击A，A所在列高亮；
      2.点击1，1所在行高亮；
      3.点击中间cell的"asa"，A和1这两个格高亮，也就是这个cell所在行列的标题；
      4.按下“ctrl”同时选中"asa","fdfs",那么A，B，1这三个cell高亮；
和excel中实现的功能其实是一样的！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=unicode">
<META content="MSHTML 6.00.2900.2180" name=GENERATOR>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT></HEAD>
<BODY onload='attachEvent()'>
<table border="1" id="table1">
     <tr>
<td></td>
<td>A</td>
<td>B</td>
     </tr>
     <tr>
<td>1</td>
<td>asa</td>
<td>fdfs</td>
     </tr>
     <tr>
        <td>2</td>
<td>fdf</td>
<td>fds</td>
     </tr>
</table>
</BODY></HTML>

想要当作excel用，还是很经不起考验地但是你要求的，我都实现了

不错上面的兄弟,哈不过我倒发现个郁闷的问题你的这个注释挺晕人,"//如果没有ctrl就清除上次的状态",我运行的时候老是说这个注释有错误,说缺乏;号哈,"//如果没有ctrl就清除上"删除掉后面的"次的状态"这几字就没错了哈,奇怪

多谢xxuu503这位高手！！我调试过了，都能满足我的要求。但是还有两个小问题：
1.只能在IE下，firefox下不起认识作用。JS是否有firefox不支持的函数？
2.如果按住"shift"，达到excel那种效果还有些问题！
哪位能帮着修改下？一定结贴送分！

if(!window.event.ctrlKey)改成if((!window.event.ctrlKey) && (!window.event.shiftKey))试一下

回楼上的兄弟，你说的我都试过了，当多一列或者多一行的时候，中间的行列标题都不会高亮，所以shift和ctrl应该不太一样

1.只能在IE下，firefox下不起认识作用。JS是否有firefox不支持的函数？我只有MSDN的DHTML文档（给IE用的），而且没有FF环境和FF文档或者直说：我不会FF2.如果按住"shift"，达到excel那种效果还有些问题！
哪位能帮着修改下？一定结贴送分！

我一直以为是按ctrl达到效果呢

自己稍微修改了一下，可以支持"shift"多选功能。供大家参考！
<script language="javascript"> var lCellIndex = -1;
var lRowIndex = -1;
function attachEvent()
{
var table=document.getElementById("table1");
for(var i=0;i<table.cells.length;i++)
{
table.cells[i].onclick=setColor
}
}
function setColor()
{
var table=document.getElementById("table1")
var td=this
var tr=this.parentElement

if(window.event.shiftKey)
{
if(lCellIndex == -1)
{
//no click
}
else
{

//set cloheader highlight of pre click and this click
if(lCellIndex < td.cellIndex)
{
for(var i = lCellIndex; i <= td.cellIndex; i++)
{
table.rows[0].cells[i].style.backgroundColor="Pink"
}
}
else
{
for(var i = td.cellIndex; i <= lCellIndex; i++)
{
table.rows[0].cells[i].style.backgroundColor="Pink"
}
}

//set rowheader highlight of pre click and this click
if(lRowIndex < tr.rowIndex)
  {
     for(var i = lRowIndex; i <= tr.rowIndex; i++)
     {
       table.rows[i].cells[0].style.backgroundColor="Pink"
     }
  }
  else
  {
   for(var i = tr.rowIndex; i <= lRowIndex; i++)
   {
     table.rows[i].cells[0].style.backgroundColor="Pink"
   }
  }

} }
if(!window.event.ctrlKey&&!window.event.shiftKey)
//no click 'ctrl',clear pre highlight
{
for(var i=0;i<table.cells.length;i++)
{
table.cells[i].style.backgroundColor="White"
}
}

if(td.cellIndex==0 && tr.rowIndex==0)
{
return
}

if(td.cellIndex==0)
//click row header，whole row highlight
{
for(var i=0;i<tr.cells.length;i++)
{
tr.cells[i].style.backgroundColor="Pink"
}
return
}

if(tr.rowIndex==0)
//click column header，whole column highlight
{
for(var i=0;i<table.rows.length;i++)
{
table.rows[i].cells[td.cellIndex].style.backgroundColor="Pink"
}
return
}

table.rows[0].cells[td.cellIndex].style.backgroundColor="Pink"
table.rows[tr.rowIndex].cells[0].style.backgroundColor="Pink"

lCellIndex = td.cellIndex;
lRowIndex = tr.rowIndex; }

调试易

新手求救：table中行、列的高亮显示？

解决方案 »