jQuery实现选中行变色效果(实例讲解)-偶像资源网

//点击复选框添加样式

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
<head>
  <meta charset=\"UTF-8\">
  <title></title>
  <style>
    table {
      border: 0;
      border-collapse: collapse;
    }

    td {
      font: normal 12px/17px Arial;
      padding: 2px;
      width: 100px;
    }

    th {
      font: bold 12px/17px Arial;
      text-align: left;
      padding: 4px;
      border-bottom: 1px solid #333;
    }

    .even {
      background: #FFF38F;
    }

    /* 偶数行样式*/
    .odd {
      background: #FFFFEE;
    }

    /* 奇数行样式*/
    .selected {
      background: #FF6500;
      color: #fff;
    }
  </style>
  <script src=\"js/jquery-1.11.3.min.js\" type=\"text/JavaScript\"></script>
  <script type=\"text/javascript\">
    $(function () {
      $(\"tbody tr:even\").addClass(\"even\");
      $(\"tbody tr:odd\").addClass(\"odd\");
      $(\":checkbox\").change(function () {
        if ($(this).is(\":checked\")) {
          $(this).parents(\"tr\").addClass(\"selected\");
        }else{
          $(this).parents(\"tr\").removeClass(\"selected\");
        }
      });
      //初始化默认选中色selected样式
      $(\":checkbox\").each(function () {
        if ($(this).is(\":checked\")) {
          $(this).parents(\"tr\").addClass(\"selected\");
        }
      })
    })
  </script>
</head>
<body>
<table>
  <thead>
  <tr>
    <th></th>
    <th>姓名</th>
    <th>性别</th>
    <th>暂住地</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type=\"checkbox\" name=\"choice\" value=\"\"/></td>
    <td>张山</td>
    <td>男</td>
    <td>浙江宁波</td>
  </tr>
  <tr>
    <td><input type=\"checkbox\" name=\"choice\" value=\"\"/></td>
    <td>李四</td>
    <td>女</td>
    <td>浙江杭州</td>
  </tr>
  <tr>
    <td><input type=\"checkbox\" name=\"choice\" value=\"\" checked=\'checked\'/></td>
    <td>王五</td>
    <td>男</td>
    <td>湖南长沙</td>
  </tr>
  <tr>
    <td><input type=\"checkbox\" name=\"choice\" value=\"\"/></td>
    <td>找六</td>
    <td>男</td>
    <td>浙江温州</td>
  </tr>
  <tr>
    <td><input type=\"checkbox\" name=\"choice\" value=\"\"/></td>
    <td>RAIn</td>
    <td>男</td>
    <td>浙江杭州</td>
  </tr>
  <tr>
    <td><input type=\"checkbox\" name=\"choice\" value=\"\"/></td>
    <td>MAXMAN</td>
    <td>女</td>
    <td>浙江杭州</td>
  </tr>
  </tbody>
</table>
</body>
</html>

//点击行添加样式

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
<head>
  <meta charset=\"UTF-8\">
  <title></title>
  <style>
    table {
      border: 0;
      border-collapse: collapse;
    }

    td {
      font: normal 12px/17px Arial;
      padding: 2px;
      width: 100px;
    }

    th {
      font: bold 12px/17px Arial;
      text-align: left;
      padding: 4px;
      border-bottom: 1px solid #333;
    }

    .even {
      background: #FFF38F;
    }

    /* 偶数行样式*/
    .odd {
      background: #FFFFEE;
    }

    /* 奇数行样式*/
    .selected {
      background: #FF6500;
      color: #fff;
    }
  </style>
  <script src=\"js/jquery-1.11.3.min.js\" type=\"text/javascript\"></script>
  <script type=\"text/javascript\">
    $(function () {
      $(\"tbody tr:even\").addClass(\"even\");
      $(\"tbody tr:odd\").addClass(\"odd\");
      $(\"tbody tr\").click(function () {
        var hasselect = $(this).hasClass(\"selected\");
        if (hasselect) {
          $(this).removeClass(\"selected\");
          $(this).find(\"input\").attr(\"checked\", false);
        } else {
          $(this).addClass(\"selected\");
          $(this).find(\"input\").attr(\"checked\", true);
        }
      })
      $(\'tbody>tr:has(:checked)\').addClass(\'selected\');
//      $(\":checkbox\").each(function () {
//        if ($(this).is(\":checked\")) {
//          $(this).parents(\"tr\").addClass(\"selected\");
//        }
//      })

    })
  </script>
</head>
<body>
<table>
  <thead>
  <tr>
    <th></th>
    <th>姓名</th>
    <th>性别</th>
    <th>暂住地</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type=\"checkbox\" name=\"choice\" value=\"\"/></td>
    <td>张山</td>
    <td>男</td>
    <td>浙江宁波</td>
  </tr>
  <tr>
    <td><input type=\"checkbox\" name=\"choice\" value=\"\"/></td>
    <td>李四</td>
    <td>女</td>
    <td>浙江杭州</td>
  </tr>
  <tr>
    <td><input type=\"checkbox\" name=\"choice\" value=\"\" checked=\'checked\'/></td>
    <td>王五</td>
    <td>男</td>
    <td>湖南长沙</td>
  </tr>
  <tr>
    <td><input type=\"checkbox\" name=\"choice\" value=\"\"/></td>
    <td>找六</td>
    <td>男</td>
    <td>浙江温州</td>
  </tr>
  <tr>
    <td><input type=\"checkbox\" name=\"choice\" value=\"\"/></td>
    <td>Rain</td>
    <td>男</td>
    <td>浙江杭州</td>
  </tr>
  <tr>
    <td><input type=\"checkbox\" name=\"choice\" value=\"\"/></td>
    <td>MAXMAN</td>
    <td>女</td>
    <td>浙江杭州</td>
  </tr>
  </tbody>
</table>
</body>
</html>

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

jQuery实现选中行变色效果(实例讲解)

请登录后发表评论