jquery设置table 鼠标移动、离开、点击样式，同时css设置table滚动条（访tablePanel）...

最新推荐文章于 2024-04-23 10:36:46 发布

华子w908925859

最新推荐文章于 2024-04-23 10:36:46 发布

阅读量3.3k

点赞数

分类专栏： java技术文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/mr_lili_111/article/details/84489480

版权

java技术专栏收录该内容

81 篇文章 1 订阅

订阅专栏

<html>
<head>
<SCRIPT type=text/javascript src="../../jquery/jquery-2.0.1.min.js"></SCRIPT>
<style type="text/css">
/*所有内容都在这个DIV内*/
div.all {
border: 1px solid #4BB3E2;
width: 100%; /*这个宽度可根据实际需要改变*/
clear: right;
}

/*表头在这个DIV内*/
div.title {
width: 100%;
background-color: #4BB3E2;
}
/*内容在这个DIV内*/
div.content {
width: 100%;
overflow: scroll; /*总是显示滚动条*/
overflow-x: hidden; /*去掉横向滚动条*/
height: 200px;
}
div.title_left {
float: left;
margin-right: 17px;
}
div.content_left {
float: left;
}

.main_table {
width: 100%;
border: 1px solid #4BB3E2;
border-collapse: collapse; /*边线与旁边的合并*/
table-layout:fixed;
}
.main_table tr th {
border: 1px solid #4BB3E2;
background-color: #4BB3E2;
font-size:14px; line-height:35px; background:#4BB3E2; border:solid 1px #BEE5F9;
overflow: hidden; /*超出长度的内容不显示*/
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all; /*字内断开*/
text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符*/
white-space: nowrap;
}
/*单元格样式*/
.main_table tr td {
border: 1px solid #4BB3E2;
overflow: hidden;
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}

</style>
</head>
<body>
<div class="all">
<div class="title">
<div class="title_left">
<table class="main_table">
<tr>
<th>姓名</th><th style="width:30%">年龄</th><th>性别</th><th>班级</th>
</tr>
</table>
</div>
</div>
<div class="content">
<div class="content_left">
<table class="main_table" id="taskInfo_tbId">
<tr>
<td>aaaaaaaaaaaaaa</td><td style="width:30%">aaaaaaaaaaaaa</td><td>cccccccccccc</td><td>bbbbbbbbbbbbbbbbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript">

function setDataTbMovecss(tbid){
var objTmp = '';
$("#"+tbid+" tr").mouseover(function(){ //鼠标移动的高亮显示
$(this).css("background", "#BEE5F9");
}).mouseout(function(){
if('' != objTmp){//表示有点击
if(objTmp != this){
$(this).css("background", "#FFFFFF");
}
}else{
$(this).css("background", "#FFFFFF");
}
}).click(
function(){
if(objTmp != this){
objTmp = this;
$("#"+tbid+" tr").each(function(){
$(this).css("background", "#FFFFFF");
});
}
$(this).css("background", "#BEE5F9");
}
);
}
setDataTbMovecss("taskInfo_tbId");
</script>
</body>
</html>

华子w908925859

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery设置table 鼠标移动、离开、点击样式，同时css设置table滚动条（访tablePanel）...

/*所有内容都在这个DIV内*/ div.all { border: 1px solid #4BB3E2; width: 100%; /*这个宽度可根据实际需要改变*/ clear: right; ...
复制链接

扫一扫

专栏目录