jquery 表格（radio）

最新推荐文章于 2022-04-21 12:12:16 发布

fliay

最新推荐文章于 2022-04-21 12:12:16 发布

阅读量628

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/g631233828/article/details/8456208

版权

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>


<style type="text/css"> 
.even{
background:#CCC
}
.odd{
background:#999 
}
.selected{
background:red 
}
</style> 


<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//$("tr:odd").addClass("odd");//给奇数添加样式
//$("tr:even").addClass("even");//给偶数添加样式
//$("tbody>tr:odd").addClass("odd");//只让tbody下的才有效果
//$("tbody>tr:even").addClass("even");
$("tr:contains('李B')").addClass("selected").find(':radio').attr('checked',true)//使用contains来控制高亮
$('tbody>tr').click(function(){
$(':radio').attr('checked',false);
$(this).addClass('selected').siblings().removeClass('selected').end().find(':radio').attr('checked',true);
})


})



</script>






<body>
<table >
<thead>
    <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        <tbody>
        <tr><td><input type="radio" /></td><td>王A</td><td>男</td><td>上海</td></tr>
            <tr><td><input type="radio" /></td><td>李B</td><td>女</td><td>上海</td></tr>
            <tr><td><input type="radio" /></td><td>古典风格B</td><td>女</td><td>上海</td></tr>
            <tr><td><input type="radio" /></td><td>和规范化</td><td>女</td><td>上海</td></tr>
            <tr><td><input type="radio" /></td><td> 加攻击</td><td>女</td><td>上海</td></tr>
            <tr><td><input type="radio" /></td><td>法规和规范化</td><td>男</td><td>上海</td></tr>
            <tr><td><input type="radio" /></td><td>丹甫股份</td><td>男</td><td>上海</td></tr>
            <tr><td><input type="radio" /></td><td>填入</td><th>女</td><td>上海</td></tr>
            <tr><td><input type="radio" /></td><td>地方B</td><th>女</td><td>上海</td></tr>
            <tr><td><input type="radio" /></td><td>李更好发挥</td><td>女</td><td>上海</td></tr>
            <tr><td><input type="radio" /></td><td>交换机</td><th>男</td><td>上海</td></tr>
            
        </tbody>
    </thead>
</table>


</body>
</html>

fliay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 表格（radio）

无标题文档 .even{background:#CCC}.odd{background:#999 }.selected{background:red } $(function(){//$("tr:odd").addClass("odd");//给奇数添加样式//$("tr:even").addClass("even
复制链接

扫一扫