JS实现光棒效果

时间：2020-12-26 05:44:43
1.当鼠标移动到该记录的时候编程蓝色
2.当鼠标移开的时候改记录编程默认颜色(比如白色)
3.当用户选中某一条记录的时候编程红色

var Color;
function mouse(obj, affair) {
if (affair == "onmouseover") {
Color = obj.style.backgroundColor;
obj.style.backgroundColor = "#6699ff";
}else if (affair == "onmouseout"){
obj.style.backgroundColor = Color;
}else{
obj.style.backgroundColor = "#FF0000";
}
}

求大神, 

6 个解决方案

#1

目前已经实现的就是移动 移开,

就是不明白当用户点击的时候,怎么记录下来,

#2

onmouseclick

#3

引用 2 楼 dikeboy1234 的回复:
onmouseclick


这个我已经用了~  而且目前实现了,移入 移开的功能

就是那个点击不明白怎么实现 ~

#4



  <script type="text/javascript">

  <!--

	function over(obj){

		//var tr = event.srcElement;

		obj.style.backgroundColor="red";

	}

	function out(obj){

		obj.style.backgroundColor="white";

	}

	function clicked(obj){

		obj.style.backgroundColor="green";

	}

  //-->

  </script>

 </head>


 <body>

  <table border="1">

  <tr onmouseover="over(this)" onmouseout="out(this)" onclick="clicked(this)">

	<td>1111</td>

	<td>2222</td>

	<td>3333</td>

  </tr>

  </table>

 </body>

#5

引用 4 楼 feg545 的回复:
HTML code

  <script type="text/javascript">
  <!--
    function over(obj){
        //var tr = event.srcElement;
        obj.style.backgroundColor="red";
    }
    function out(obj){
        obj.sty……


我现在就是这样的效果,
我想的是这样的,
比如：
当用户点击某一行(第一行)的时候这一行的颜色为green,
并且当鼠标移开的时候颜色还是green，
鼠标再次移入的时候颜色为red

最后当用户再次选中另外一行(第二行)的时候,
这一行的颜色为green,
并且当鼠标移开的时候颜色还是green，
鼠标再次移入的时候颜色为red

不知道说的是否清楚,麻烦了


#6



<script type="text/javascript">

  <!--

	var lastSelected;  //最后点击的元素

    function over(obj){

        obj.style.backgroundColor="red";

    }

    function out(obj){

		if(obj == lastSelected )

			obj.style.backgroundColor="green";

		else

			obj.style.backgroundColor="white";

    }

    function clicked(obj){

		if(lastSelected != null)

		{

			lastSelected.style.backgroundColor="white";

		}

		lastSelected = obj;

        obj.style.backgroundColor="green";

    }

  //-->

  </script>

 </head>


 <body>

  <table border="1">

  <tr onmouseover="over(this)" onmouseout="out(this)" onclick="clicked(this)">

    <td>1111</td>

    <td>2222</td>

    <td>3333</td>

  </tr>

  <tr onmouseover="over(this)" onmouseout="out(this)" onclick="clicked(this)">

    <td>1111</td>

    <td>2222</td>

    <td>3333</td>

  </tr>

  </table>

 </body>

#1

目前已经实现的就是移动 移开,

就是不明白当用户点击的时候,怎么记录下来,

#2

onmouseclick

#3

引用 2 楼 dikeboy1234 的回复:
onmouseclick


这个我已经用了~  而且目前实现了,移入 移开的功能

就是那个点击不明白怎么实现 ~

#4



  <script type="text/javascript">

  <!--

	function over(obj){

		//var tr = event.srcElement;

		obj.style.backgroundColor="red";

	}

	function out(obj){

		obj.style.backgroundColor="white";

	}

	function clicked(obj){

		obj.style.backgroundColor="green";

	}

  //-->

  </script>

 </head>


 <body>

  <table border="1">

  <tr onmouseover="over(this)" onmouseout="out(this)" onclick="clicked(this)">

	<td>1111</td>

	<td>2222</td>

	<td>3333</td>

  </tr>

  </table>

 </body>

#5

引用 4 楼 feg545 的回复:
HTML code

  <script type="text/javascript">
  <!--
    function over(obj){
        //var tr = event.srcElement;
        obj.style.backgroundColor="red";
    }
    function out(obj){
        obj.sty……


我现在就是这样的效果,
我想的是这样的,
比如：
当用户点击某一行(第一行)的时候这一行的颜色为green,
并且当鼠标移开的时候颜色还是green，
鼠标再次移入的时候颜色为red

最后当用户再次选中另外一行(第二行)的时候,
这一行的颜色为green,
并且当鼠标移开的时候颜色还是green，
鼠标再次移入的时候颜色为red

不知道说的是否清楚,麻烦了


#6



<script type="text/javascript">

  <!--

	var lastSelected;  //最后点击的元素

    function over(obj){

        obj.style.backgroundColor="red";

    }

    function out(obj){

		if(obj == lastSelected )

			obj.style.backgroundColor="green";

		else

			obj.style.backgroundColor="white";

    }

    function clicked(obj){

		if(lastSelected != null)

		{

			lastSelected.style.backgroundColor="white";

		}

		lastSelected = obj;

        obj.style.backgroundColor="green";

    }

  //-->

  </script>

 </head>


 <body>

  <table border="1">

  <tr onmouseover="over(this)" onmouseout="out(this)" onclick="clicked(this)">

    <td>1111</td>

    <td>2222</td>

    <td>3333</td>

  </tr>

  <tr onmouseover="over(this)" onmouseout="out(this)" onclick="clicked(this)">

    <td>1111</td>

    <td>2222</td>

    <td>3333</td>

  </tr>

  </table>

 </body>
标签：

相关文章