如何实现突出光标所在的列?

你把问题说详细点嘛。估计是要做当前文本获取焦点后的一个状态，你可以写Focus事件：改变当前内容样式，比如文本框边宽颜色风格等就可以了

我以前写过一个<<对表格的行和列都能加亮显示>>(见http://blog.csdn.net/cuckoo1/archive/2008/12/26/3615711.aspx),是通过javascript直接写成的,现在想通过jQuery来实现,觉得很难!想请高手指教一下.
刚学jQuery,不得窍! ^_^

可以在后台这样:
protected void datalist_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onmouseover", "a=this.style.backgroundColor;this.style.backgroundColor='#E6E6FA'");
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=a");
        }
    }

Jquery写的，记得给分噢。
<script type="text/javascript" language="JavaScript" src="JQuery.js"></script>    <script type="text/javascript" language="javascript">
   $(document).ready(function(){

        $("#tb thead tr th").each(function(i){
           $(this).mousemove(function(){
             $("#tb tbody tr ").each(function(j){
                 j=j+1;
                 $("#tb tr:eq("+j+") td:eq("+i+")").css("background-color","red");
              })
           }).mouseout(function(){
             $("#tb tbody tr ").each(function(e){
                 e=e+1;
                 $("#tb tr:eq("+e+") td:eq("+i+")").css("background-color","#ffffff");
              })
           })
        })
    })    </script>
    <table id="tb" border="0" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        第一列
                    </th>
                    <th>
                        第二列
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        aaa
                    </td>
                    <td>
                        bb
                    </td>
                </tr>
                <tr>
                    <td>
                        cc
                    </td>
                    <td>
                        dd
                    </td>
                </tr>
            </tbody>
        </table>

今天上班写了下。还剩给文本赋值。x ，y都取去来了。应该比较容易了。写得不好。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,th,td{font-size: 10pt;}
span{display:block;margin-top:5px; margin-left:100px;}
.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>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("td").hover(
   function () {
getIndex(this);
$(this).addClass("cross");
   },
   function () {
    clear();
   }
);
});
var clear = function(){
$(".cross").attr("class","outit");
$(".ovrit").attr("class","outit");
}
var getIndex = function(td){
var x  =  $(td).parent().children().index($(td));
var y  =  $(td).parent().parent().children().index($(td).parent());
$(td).parent().children().attr("class","ovrit");
$(td).parent().parent().children().each(function(i){
//第一行为表头
   if(i!=0){ $(this).children().eq(x).attr("class","ovrit");}
});

}
</script>
</head><body>
<table  style=" margin-left:0px;" 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>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,th,td{font-size: 10pt;}
span{margin-top:5px; margin-left:100px; font-size:36px; font-weight:600;}
.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>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("td").hover(
   function () {
getIndex(this,'ovrit');
$(this).addClass("cross");
   },
   function () {
    clear();
   }
);
$("td").click(function(){
getIndex(this,'clkit');
$(this).attr("class","clkcr");
});
});
var clear = function(){
$(".cross").attr("class","outit");
$(".ovrit").attr("class","outit");
$(".clkit").attr("class","outit");
$(".clkcr").attr("class","outit");
}
var getIndex = function(td,tdClass){
        var x  =  $(td).parent().children().index($(td));
        var y  =  $(td).parent().parent().children().index($(td).parent());

//if(tdClass!="clkit"&&td!="outit") tdClass = "ovrit";
//else{tdClass="clkit";}
        $(td).parent().children().attr("class",tdClass);
        $(td).parent().parent().children().each(function(i){
            //第一行为表头
             if(i!=0){ $(this).children().eq(x).attr("class",tdClass);}
        });
$("#x").html("x:  "+(x+1));
   $("#y").html("y:  "+y);
}
</script>
</head><body>
<table  style=" margin-left:0px;" 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>
<span id="x"></span>
<span id="y"></span>
</body>
</html>加了个点击事件。效率低。哎。

调试易

如何实现突出光标所在的列?

解决方案 »