求一脚本效果。。。。。

Question

求一脚本效果。如下图所示。鼠标为中心点向表格十字方向添加背景色。。效果我已经写出来了但是鼠标移动的时候市场会出现白色和背景色交互出现的难看场面。jquery实现代码如下$("tr[name=hover] td").hover(function() {
        var rowsObj = $("tr[name=hover]");//获取总行jquery element对象
        var tdcount = (rowsObj.index($(this).parent()) + 1) * $(rowsObj.get(0)).find('td').length;//获取td总数
        var rowsindex = $(rowsObj.get(0)).find('td').length + rowsObj.find('td').index(this);//计算行中td的数量加上所在td中的总索引,方便计算td所在的行索引
        var index = rowsindex - tdcount//计算td 所在的行索引
        rowsObj.find('td:eq(' + index + ')').addClass("hover");//给竖行TD加背景
    }, function() {
        var rowsObj = $("tr[name=hover]");
        var tdcount = (rowsObj.index($(this).parent()) + 1) * $(rowsObj.get(0)).find('td').length;
        var rowsindex = $(rowsObj.get(0)).find('td').length + rowsObj.find('td').index(this);
        var index = rowsindex - tdcount
        rowsObj.find('td:eq(' + index + ')').removeClass("hover");
    });
希望能改善一下效果，不会出现空白和背景色交互。或者有更好的代码请帖出。谢谢了

Answer 1

忘记了。。行背景色加
rowsObj.find('td').addClass("hover");

Answer 2

<style>
.hover{background:#CCC};
</style>
<script src="js/jquery-1.3.2.js" type="text/javascript"> </script>
<script>
window.onload=function(){
  $("tr[name=hover] td").hover(function() {
        var rowsObj = $("tr[name=hover]");//获取总行jquery element对象
        var tdcount = (rowsObj.index($(this).parent()) + 1) * $(rowsObj.get(0)).find('td').length;//获取td总数
        var rowsindex = $(rowsObj.get(0)).find('td').length + rowsObj.find('td').index(this);//计算行中td的数量加上所在td中的总索引,方便计算td所在的行索引
        var index = rowsindex - tdcount//计算td 所在的行索引
        rowsObj.find('td:eq(' + index + ')').addClass("hover");//给竖行TD加背景
        var cur = $(this)[0];
        $(this).parent().children('td').each(function(){
           if($(this)[0]!=cur) $(this).addClass("hover");
        });
    }, function() {
        var rowsObj = $("tr[name=hover]");
        var tdcount = (rowsObj.index($(this).parent()) + 1) * $(rowsObj.get(0)).find('td').length;
        var rowsindex = $(rowsObj.get(0)).find('td').length + rowsObj.find('td').index(this);
        var index = rowsindex - tdcount
        rowsObj.find('td:eq(' + index + ')').removeClass("hover");
        $(this).parent().removeClass("hover");
        var cur = $(this)[0];
        $(this).parent().children('td').each(function(){
           if($(this)[0]!=cur) $(this).removeClass("hover");
        });
    });
}
</script>
<table>
<tr name="hover">
<td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr name="hover">
<td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr name="hover">
<td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr name="hover">
<td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr name="hover">
<td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
</table>

Answer 3

谢谢  hookee不过你在后面加了那段代码后  浏览器非常卡我改了下我自己的  也卡，但是还能接受$("tr[name=hover] td").hover(function() {
        var rowsObj = $("tr[name=hover]"); //获取所有行对象
        var rowsIndex = rowsObj.index($(this).parent()); //获取鼠标所在的行索引
        var colLen = $(rowsObj.get(0)).find('td').length; //获取单行td的数量
        var colCount = (rowsIndex + 1) * colLen; //获取鼠标所在的行tr总数量  因为索引从0开始，所以+1   (鼠标所在行+1)*单行td数量
        var rowsIndexCount = colLen + rowsObj.find('td').index(this); //获取鼠标所在的td总索引加上单行td的数量,目的是为了计算单行索引
        var index = rowsIndexCount - colCount; //计算单行索引
        rowsObj.find('td:eq(' + index + ')').css("background-color", "#eef7fd");
        $(rowsObj.get(rowsObj.index($(this).parent()))).find('td').css("background-color", "#eef7fd");
    }, function() {
        var rowsObj = $("tr[name=hover]"); //获取所有行对象
        var rowsIndex = rowsObj.index($(this).parent()); //获取鼠标所在的行索引
        var colLen = $(rowsObj.get(0)).find('td').length; //获取单行td的数量
        var colCount = (rowsIndex + 1) * colLen; //获取鼠标所在的行tr总数量  因为索引从0开始，所以+1   (鼠标所在行+1)*单行td数量
        var rowsIndexCount = colLen + rowsObj.find('td').index(this); //获取鼠标所在的td总索引加上单行td的数量,目的是为了计算单行索引
        var index = rowsIndexCount - colCount; //计算单行索引
        rowsObj.find('td:eq(' + index + ')').css("background-color", "");
        $(rowsObj.get(rowsObj.index($(this).parent()))).find('td').css("background-color", "");
    });

Answer 4

在IE里，斜角移动的时候  有点迟钝，，但是横向或者竖向移动的时候很顺畅
在firefox里还好。都很顺畅。

Answer 5

tr可以加背景，只不过会被td的背景给挡住