1、jquery选择器实现表格隔行换效果。
        主要实现功能：
            1、奇数行和偶数行颜不同。
        2、表头的颜与其他行颜不同。
        3、将内容包含“黑莓手机”的行字体颜设置为绿,字体大小：14px。
        4、鼠标移动到某一行上，当前行颜高亮显示，鼠标移动开后恢复原来的颜。
        5、点击表头“序号”后面的复选框，将所有记录全选，再次点击，取消全选。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery1.11.0.js" ></script>
    </head>
    <body>
          <table id="tlb" cellpadding="0" cellspacing="5" width="800px" height="300px" border="1px">
              <tr id="tlb1">
                  <td><b>序号</b><input type="checkbox"></td>
                  <td><b>名称</b></td>
                  <td><b>价格</b></td>
                  <td><b>数量</b></td>
              </tr>
              <tr>
                  <td>1<input type="checkbox""></td>
                  <td>apple手机</td>
                  <td>5000</td>
                  <td>10</td>   
              </tr>
              <tr>
                  <td>2<input type="checkbox""></td>
                  <td>HTC手机</td>
                  <td>3000</td>
                  <td>11</td>
                 
              </tr>
              <tr>
                  <td>3<input type="checkbox""></td>
                  <td>洛基亚手机</td>
                  <td>2000</td>
                  <td>12</td>   
              </tr>
              <tr>
                  <td>4<input type="checkbox""></td>
                  <td>三星手机</td>
                  <td>1000</td>
                  <td>13</td>
              </tr>
              <tr>
                  <td>5<input type="checkbox""></td>
                  <td>黑莓手机</td>
                  <td>5500</td>
                  <td>14</td>
              </tr>
          </table>
    <script>
        $("table").css("text-align","center");
        $("table").css("margin","0 auto");
        //1、奇数行和偶数行颜不同。
        $("table tr:odd").css("background","#888");
        $("table tr:even").css("background","aqua");
        //2、表头的颜与其他行颜不同。
        $("table tr:nth-child(1)").css("background","yellow");
        //3、将内容包含“黑莓手机”的行字体颜设置为绿,字体大小：14px。
        $("table td:contains(黑莓手机)").css("color","green");
        $("table td:contains(黑莓手机)").css("font-size","14px");
      //4、鼠标移动到某一行上，当前行颜高亮显示，鼠标移动开后恢复原来的颜。[选做]
      var ElementById("tlb");
        useover=move;
        function move(){
            console.log(tlb)
        }
       
    </script>
    </body>
</html>
jquery翻书效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。