jQuery实现表格选中行变色

最新推荐文章于 2021-10-27 18:05:33 发布

java_zhaoyanli

最新推荐文章于 2021-10-27 18:05:33 发布

阅读量3.4k

点赞数

分类专栏： myWork--

myWork-- 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实现表格选中行变色</title>
<script src="js/jquery-1.8.1.min.js"></script>
<style type="text/css">
.s1 {
 background-color: yellow;
}
</style>

<script type="text/javascript">
 $(function() {
  $("tbody tr").click(function() {
   $(this).addClass("s1").siblings().removeClass("s1");
   $(this).find(":radio").attr("checked", true);
  });
 });
</script>
</head>
<body>
 <table border="1" width="60%">
  <thead>
   <tr>
    <th>操作</th>
    <th>姓名</th>
    <th>邮箱</th>
    <th>年龄</th>
    <th>性别</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><input name="c" value="c1" type="radio" /></td>
    <td>张三丰</td>
    <td>zsf@163.com</td>
    <td>32</td>
    <td>男</td>
   </tr>

   
   <tr>
    <td><input type="radio" name="c" value="c3" /></td>
    <td>杨过</td>
    <td>yangguo@163.com</td>
    <td>12</td>
    <td>男</td>
   </tr>

    
  </tbody>
 </table>
</body>
</html>

java_zhaoyanli

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现表格选中行变色

jQuery实现表格选中行变色.s1 { background-color: yellow;} $(function() { $("tbody tr").click(function() { $(this).addClass("s1").siblings().removeClass("s1"); $(this).find(":radio").attr("check
复制链接

扫一扫