JS 能不能做到呢？ 可以的話請帖上代碼

Question

我想在一個GridView里，如果我鼠標放在某個單元格上時
這個單元格所對應的行和列都會出來顏色
就是基本上是一個十字，用onmouseover和onmouseout
但是代碼應該怎樣寫呢？

Answer 1

可以在GridView的RowDataBound事件里如下处理试试看：
       protected void gridView_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=\"" + e.Row.Style["BACKGROUND-COLOR"] + "\"");
                e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor=\"#B9D9FB\"");
            }
        }

Answer 2

        if (e.Row.RowIndex >= 0)
        {
            e.Row.Attributes["onmouseover"] = "javascript:bgcolor=this.style.backgroundColor;this.style.backgroundColor='lemonchiffon';";
            e.Row.Attributes["onmouseout"] = "javascript:this.style.backgroundColor=bgcolor;";
            foreach (TableCell c in e.Row.Cells)
            {
                c.Attributes["onmouseover"] = "javascript:bgcolor=this.style.backgroundColor;this.style.backgroundColor='red';";
                c.Attributes["onmouseout"] = "javascript:this.style.backgroundColor=bgcolor;";
            }
        }
其實1樓的回答并不是我想要的結果
我想要的是一個類似十字架的效果

Answer 3

可以写css,在事件里面,赋值或者取消被选中行的css

Answer 4

protected void gridView_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=\"" + e.Row.Style["BACKGROUND-COLOR"] + "\"");
                e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor=\"#B9D9FB\"");
            }
        }
-----------------------
支持

Answer 5

在1楼的代码上改一下就行了//                e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor=\"#B9D9FB\"");
//改为
e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor=\"#B9D9FB\";this.style.cursor='crosshair'");

Answer 6

var table=document.getElementById('<%=gridView.ClientID%>');
var trs=table.getElementsByTagName('tr');
for(var i=0;i<trs.length;i++){
var tr=trs[i];
    tr.onmouseover=function(){
     this.style.background='#000';
    }
    tr.onmouseout=function(){
     this.style.background='#fff';
    }
}

Answer 7

经过ie6.0测试:
c#:
protected void GridView1_RowDataBound ( object sender, GridViewRowEventArgs e )
    {
        if ( e.Row.RowType == DataControlRowType.DataRow )
        {
            for ( int i = 0; i < e.Row.Cells.Count; i++ )
            {
                e.Row.Cells [ i ].Attributes.Add ( "onmouseover", "changeColor(this)" );
                e.Row.Cells [ i ].Attributes.Add ( "onmouseout", "cancelColor(this)" );
            }
        }  
    }
javascript:
function changeColor(oTd)
{
  var rowIndex = oTd.parentNode.rowIndex;
  var cellIndex = oTd.cellIndex;
  var table1 = document.getElementById("<%=GridView1.ClientID%>");
  var rows = table1.rows;
  if(table1.lastRowIndex!=undefined && table1.lastCellIndex!=undefined)
  {
    for(i=0; i<rows.length; i++)
    {
      if(i==table1.lastRowIndex)
      {
        rows[i].style.backgroundColor="";
        continue;
      }
      var cells = rows[i].cells;
      for(j=0; j<cells.length; j++)
      {
        if(j==table1.lastCellIndex)
        {
          cells[j].style.backgroundColor="";
          break;
        }
      }
    }
  }
  for(i=0; i<rows.length; i++)
  {
    if(i==rowIndex)
    {
      rows[i].style.backgroundColor="#FF5533";
      continue;
    }
    var cells = rows[i].cells;
    for(j=0; j<cells.length; j++)
    {
      if(j==cellIndex)
      {
        cells[j].style.backgroundColor="#FF5533";
        break;
      }
    }
  }
  table1.lastRowIndex = rowIndex;
  table1.lastCellIndex = cellIndex;
}
function cancelColor(oTd)
{
  var table1 = document.getElementById("<%=GridView1.ClientID%>");
  var rows = table1.rows;
  if(table1.lastRowIndex!=undefined && table1.lastCellIndex!=undefined)
  {
    for(i=0; i<rows.length; i++)
    {
      if(i==table1.lastRowIndex)
      {
        rows[i].style.backgroundColor="";
        continue;
      }
      var cells = rows[i].cells;
      for(j=0; j<cells.length; j++)
      {
        if(j==table1.lastCellIndex)
        {
          cells[j].style.backgroundColor="";
          break;
        }
      }
    }
  }
}

Answer 8

changke18 的方法可以！~也就是一循环遍历的事情
1`不是太麻烦！~

Answer 9

changke18的代碼可行
結貼啦，謝謝代碼

Answer 10

GridView十字架 留下脚印!!!