用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

jquery 表格隔行变色 选中行高亮

2013-03-17 作者: 小蜜锋举报

[javascript]代码库

<!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>
<title></title>

<!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
        $(function(){
                $("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式
                $("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式
                $('tbody>tr').click(function() {
                        $(this)
                                .addClass('selected')
                                .siblings().removeClass('selected')
                                .end()
                                .find(':radio').attr('checked',true);
                });
                // 如果单选框默认情况下是选择的,则高色.
                 // $('table :radio:checked').parent().parent().addClass('selected');
                //简化:
                  $('table :radio:checked').parents("tr").addClass('selected');
         //再简化:
                 //$('tbody>tr:has(:checked)').addClass('selected');

        })
  //]]>
  </script>
<style type="text/css">
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:#eee;
}  /* 偶数行样式*/
.odd {
	background:#ddd;
}  /* 奇数行样式*/
.selected {
	background:#aaa;
	color:#fff;
}
</style>
</head>

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

[代码运行效果截图]


jquery 表格隔行变色 选中行高亮


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...