Js、jQuery、angular隔行换色

最新推荐文章于 2022-03-08 13:00:00 发布

小白的成长之路_

最新推荐文章于 2022-03-08 13:00:00 发布

阅读量217

点赞数

本文链接：https://blog.csdn.net/XiaoZhuang__/article/details/78713604

版权

angular隔行换色

    <style>
        .css1{color:red;}
        .css2{color:blue;}
    </style>
</head>
<body>
<div  ng-controller="aaa">
    <P>ng-repeat指令：遍历集合</P>
    <ul>数据data输出,$even奇数项选择：
        <li ng-repeat="data in dataList" class="{{ $even ? 'css1': 'css2'}}">{{data}}</li>
    </ul>
</div>
</body>

js隔行换色

<!DOCTYPE html>

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
   </head>
   <body>
       <table border="1px" cellpadding="0dp" cellspacing="0dp" width="300px" height="200px">
           <tr class="tr1">
               <th>姓名</th>
               <th>性别</th>
           </tr>
           <tr class="tr1">
               <th>张三</th>
               <th>男</th>
           </tr>
           <tr class="tr1">
               <th>李四</th>
               <th>女</th>
           </tr>
           <tr class="tr1">
               <th>田七</th>
               <th>女</th>
           </tr>
           <tr class="tr1">
               <th>黑八</th>
               <th>男</th>
           </tr>
       </table>
       <input type="button" value="JS" id="aa"/>
       <input type="button" value="jquery" id="bb"/>
       <script type="text/javascript">
           //js隔行换色
           var aa=document.getElementById("aa");
           aa.οnclick=function f(){
               //获取所有tr
               //var tr1=document.getElementsByTagName("tr");这个也可以,是获取标签的名称
               var tr1=document.getElementsByClassName("tr1")
               for(var i=0;i<tr1.length;i++){
                   if(i%2==0){
                       tr1[i].style.background="red";
                   }else{
                       tr1[i].style.background="yellowgreen";
                   }
               }
           }
           //隔行变色
           //even 偶数从0开始
           //odd 奇数
           $("#bb").click(function (){
               $("tr:even").css("background","aqua");
               $("tr:odd").css("background","plum");
           });
           //鼠标悬停变色
           $("tr:even").hover(function(){
               $(this).css("background","bisque");
           },function(){
               $(this).css({"background":"plum"});
           });
       </script>
   </body>

</html>