tr选中效果
程序员文章站
2022-05-25 22:31:39
...
页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>对tr的选中变色处理</title>
<link rel="stylesheet" type="text/css" href="model.css"/>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style>
a {
text-decoration: none;
color: grey;
margin-right: 5px;
}
a:hover {
text-decoration: underline;
}
.span_name {
height: 20px;
cursor: pointer;
}
.div_mscs_head{
width:100%;
height:30px;
line-height:30px;
background-color:#D1EEEE;
text-align:right;
}
.div_mscs_head span {
float: left;
margin-left: 10px;
color: green;
}
.div_mscs_head a{
margin-right:10px;
}
.div_mscs_body{
padding: 0 20px;
height:220px;
}
</style>
<script>
$('#tbl').find('tr:not(.tr_add):gt(0)').live('mouseover', function(){
$(this).not('[chosen]').css('backgroundColor', '#ebebeb');
}).live('mouseout', function(){
$(this).not('[chosen]').css('backgroundColor', '#ffffff');
}).live('click', function(){
if(!$(this).is('[chosen]')){
$('#tbl').find('tr:not(.tr_add):gt(0)').filter('[chosen]').css('backgroundColor', '#ffffff').removeAttr('chosen');
$(this).css('backgroundColor', '#cdcdcd').attr('chosen', true);
} else {
$(this).css('backgroundColor', '#ffffff').removeAttr('chosen');
}
});
</script>
</head>
<body>
<div class="aui-normal">
<div class="fspan12 fspan-common-fmp label_title"><span>选择tr<span></div>
</div>
<div class="aui-normal">
<div class="fspan3 fspan-common-fmp"><span>当前选择：</span><span style="color:red;">tr自定义位置</span></div>
</div>
<div class="aui-normal in-center">
<div class="fspan6 fspan-common-fmp">
<div class="aui-normal in-center">
<table id="tbl" class="table_normal" cellpadding="0" cellspacing="0">
<thead>
<tr class="tr_title">
<th>名称</th>
<th>类型</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr style="height:25px;cursor:pointer;">
<td style="width:50%">
<span class="span_name">zhaoyun</span>
</td>
<td style="width:25%">
<span style="color:green">运动</span>
</td>
<td style="width:25%">
<a href="javascript:void(0)" msclId="'+id+'" class="a_remove">删除</a>
</td>
</tr>
<tr style="height:25px;cursor:pointer;">
<td style="width:50%">
<span class="span_name">yunxiang</span>
</td>
<td style="width:25%">
<span style="color:green">服装</span>
</td>
<td style="width:25%">
<a href="javascript:void(0)" msclId="'+id+'" class="a_remove">删除</a>
</td>
</tr>
<tr style="height:25px;cursor:pointer;">
<td style="width:50%">
<span class="span_name">dchyun</span>
</td>
<td style="width:25%">
<span style="color:green">吃喝</span>
</td>
<td style="width:25%">
<a href="javascript:void(0)" msclId="'+id+'" class="a_remove">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
</body>
</html>