怎样用javascript实现控制表格单元格中的背景颜色

豌豆 2011-11-24 10:38:46

就是鼠标放到哪个单元格上时哪个单元格的背景色就会改变求代码！先谢谢各位了

...全文

1197 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

小廖 2011-11-24

打赏
举报

$("tr").hover(
function(){
$(this).css("background","#fff");
},
function(){
$(this).css("background","");
}
);

MuBeiBei 2011-11-24

打赏
举报

var trs = document.getElementsByTagName('tr');

把我上面的例子这块改成

var trs = document.getElementsByTagName('td');

没看清需求以为要行呢~·so sorry~`

p2227 2011-11-24

打赏
举报

<table>

<tr><td>1</td><td>2</td></tr>

</table>

<script>

var t = document.getElementsByTagName("td");

for (var i=0;i<t.length ;i++ )

{

	t[i].onmouseover = function(){

		this.style.background="red";

	}

	t[i].onmouseout = function(){

		this.style.background="";

	}

}



</script>

MuBeiBei 2011-11-24

打赏
举报

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <style>

  	

  </style>

  </head>

  <body>

  	<table style="width:500px;" border="1">

    	<tr>

        	<td>1111</td>

        </tr>

        <tr>

        	<td>1111</td>

        </tr>

        <tr>

        	<td>1111</td>

        </tr>

        <tr>

        	<td>1111</td>

        </tr>

    </table>

    <script>

    	var trs = document.getElementsByTagName('tr');

		

		for(var i = 0,tr; tr = trs[i++];){

			tr.onmouseover = function(){

				this.style.background = '#333';	

			};	

			tr.onmouseout = function(){

				this.style.background = '#fff';	

			};

		}

    </script>

  </body>

</html>

豌豆 2011-11-24

打赏
举报

谢谢各位

licip 2011-11-24

打赏
举报

楼上已有答案，如果你要鼠标放在单元格上变颜色的话那就把1楼的tr改为td就行了。

安得权 2011-11-24

打赏
举报

$(document).ready(function (elementId, oddColor, evenColor, hoverClass) {
$("#" + elementId + " tr:odd").css("background-color", oddColor);
$("#" + elementId + " tr:even").css("background-color", evenColor);
$("#" + elementId + " tr").hover(function () {
$(this).addClass(hoverClass)
}, function () {
$(this).removeClass(hoverClass)
});
});

南老頭 2011-11-24

打赏
举报

[Quote=引用 4 楼 liaody_meil 的回复:]

$("tr").hover(
function(){
$(this).css("background","#fff");
},
function(){
$(this).css("background","");
}
);
[/Quote] jquery的方法是挺简单的，思路就是为每个TD注册事件，触发鼠标县浮事件时，改变对象的背景。不用jqery实现时，直接用 event.srcElement 获取事件源，做个判断就是了。

吉普赛的歌社区高级成员 T9 2011-11-24

打赏
举报

<html>

  <head>

    <title>表格变色</title>

    <style type="text/css">

        .odd{background:#ffffee;}

        .even{background:#fff38f;}

        .first{background:red;}

        .last{background:blue;}

        .mouseOver{background:green;}

    </style>

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>  

   <script type="text/javascript">

           $(function(){

               $("tr:odd").addClass("odd");        //加奇行样式

               $("tr:even").addClass("even");        //加偶行样式

               $("tr:first").addClass("first");    //为第一行加样式

               $("tr:last").addClass("last");        //为最后行加样式

               //为行元素加上鼠标移入和移出事件

               $("tr").mouseover(function() {

                $(this).addClass("mouseOver")    //加上样式

            }).mouseout(function() {

                $(this).removeClass("mouseOver")//去掉样式

            });

           })

   </script>

  </head>

  <body>

      <table border="1">

          <tr><td>姓名</td><td>年龄</td></tr>

          <tr><td>王华</td><td>18</td></tr>

          <tr><td>刘云</td><td>19</td></tr>

          <tr><td>刘亮</td><td>15</td></tr>

          <tr><td>叶子</td><td>17</td></tr>

          <tr><td>刘梦</td><td>20</td></tr>

      </table>

  </body>

</html>