给大家分享一个比较简单的效果，点击表格每一行变色的几种方法。。。

代码一：

function choose(type,color){
            var lastindex=-1;
            var thistype=document.getElementsByTagName(type);
            for(var i=0;i<thistype.length;i++){
                thistype[i].setAttribute("myindex",i);
            }
            for(var i=0;i<thistype.length;i++){
                thistype[i].onclick=function(){
                    thistype[parseInt(this.getAttribute("myindex"))].style.background=color;
                    if(lastindex==-1){
                        lastindex=parseInt(this.getAttribute("myindex"));
                    }else if(lastindex==parseInt(this.getAttribute("myindex"))){
                    }else{
                        thistype[lastindex].style.background="";
                        lastindex=parseInt(this.getAttribute("myindex"));
                    }
                }
            }
        }

这个代码是在我不知道以下方法之前自己封装的，代码比较多，所以不建议大家学习，没有充分利用js的功能和特点，这个代码是完善了的，需要改变的只有获取标签的问题，

这里我只通过标签来查找，我们可以在这个方法上继续添加代码，使其可以通过name,className查找。

分析下我的这个代码：先设置一个变量，用于存储我点击的这个对象是对应的属性值，目的是我点下次的时候将前一个对象的效果清除，第一个for循环我给每一个标签加了一个自定义属性，目的是下面点击的时候找到该标签是属于哪一个标签，第二个for循环给每个标签加一个点击事件，设置当前这个标签的背景样式，判断语句中，第一个if是将lastindex的初始值变为当前这个标签的属性值，else-if是如果上次点击的标签和这个标签是同一个，则不进行任何操作，else是将上一个标签的样式清除，比保存当前这个标签的属性值。

代码二：

var lastindex=0;function choose(){
            var thistype=document.getElementsByTagName("li");
            for(var i=0;i<thistype.length;i++){
                xx(i);
            }
        }
        function xx(i){
            var thistype=document.getElementsByTagName("li");
            thistype[i].onclick=function(){
                thistype[i].style.background="red";
                thistype[lastindex].style.background="";
                lastindex=i;
            }
        }

这个方法很明显比上面的代码少很多,这里没处理的地方是当我点击的时候没有进行第一个代码的if-else判断，把上面判断的代码复制下来即可，似乎代码也不少，但是这里少了一个循环，对网页来说更优化一些，这个对刚开始学习js来说比较推荐使用，比较好理解。

代码分析：这里基本逻辑是一样的，少了添加属性的过程，第一个function主要是循环，将循环值通过传参数给第二个function，而这个i就是对应的当前的这个标签，称为标识吧

下面上第三种方法，也是我用的最多的方法。

代码三：

var lastindex=0 (function(i){
                thistype[i].onclick=function(){
                 thistype[i].style.background="red";
                 thistype[lastindex].style.background="";
                 lastindex=i;
                 }
             })(i)

先来进行代码分析:这里用到js里面的这个东西(function(){xxxx})()，似乎叫做自执行匿名函数:

1)常见格式：(function() { /* code */ })();

2)解释：包围函数（function(){})的第一对括号向脚本返回未命名的函数，随后一对空括号立即执行返回的未命名函数，括号内为匿名函数的参数。

3)作用：可以用它创建命名空间，只要把自己所有的代码都写在这个特殊的函数包装内，那么外部就不能访问，除非你允许(变量前加上window，这样该函数或变量就成为全局)。各JavaScript库的代码也基本是这种组织形式。

看到这个代码的小伙伴和第一个比较，是不是觉得瞬间少了一大截，需要添加的部分和代码二一样，上面有说明，这个是充分用到了js的特点来做的，多的不说，还不知道的小伙伴们赶紧入手吧。

　　这个效果是我们做网页的基本上处处都要用到的，虽然看起来比较简单，但是我们可以用在很多地方，比如QQ空间里面，我们上传的图片都是有时间轴的，在加上这个效果，我们可以做一些点击效果。

　　希望看到这个帖子的小伙伴们不要嫌弃我的代码，如果你们有更好的方法，千万不要藏着掖着，和大家分享分享，共同进步！！！！！！