`
mr.lili
  • 浏览: 152374 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类

jquery设置table 鼠标移动、离开、点击样式,同时css设置table滚动条(访tablePanel)

 
阅读更多
<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> 
分享到:
评论
1 楼 kqzl67890 2014-03-14  
弄个效果图出来看哈撒

相关推荐

    jQuery table scroll表格插件内容部分加滚动条

    jQuery Table Scroll插件还支持其他高级功能,例如自定义滚动条样式、响应式设计等。在使用过程中,可以通过查阅插件的官方文档或提供的示例代码来了解更多信息。 需要注意的是,当表格数据动态加载或使用Ajax获取...

    jquery给表格加滚动条

    - 可以使用jQuery插件,如DataTables,它提供了更丰富的表格功能,包括自动分页、排序、过滤等,同时也支持自定义滚动条样式。 - 对于大数据量的表格,可以考虑使用虚拟滚动,只渲染视口内的行,提高性能。 - 考虑到...

    页面出现滚动条的时候如何让滚动条不影响页面宽度

    其次,需要对body元素应用CSS样式,隐藏水平滚动条,但保留垂直滚动条(如果需要的话)。可以设置body的overflow-x属性为hidden,这样水平滚动条就不会出现,但body元素依然可以垂直滚动。相应的CSS样式为:body{...

    table内容出现滚动条和表头对齐问题

    为了解决"table内容出现滚动条和表头对齐问题",我们需要深入理解表格布局、CSS样式控制以及可能涉及到的JavaScript或jQuery解决方案。 首先,让我们了解一下HTML表格的基本结构。一个HTML表格由`&lt;table&gt;`元素开始...

    css+jquery完美实现table表头固定显示(浮动)

    总的来说,结合CSS的`position: fixed`和jQuery的事件监听及样式调整,我们可以轻松实现table表头的固定显示,使用户在滚动查看大量数据时仍能清晰地看到列标题,提升交互体验。在实际开发中,这种技术广泛应用于...

    TABLE滚动条

    标题中的“TABLE滚动条”指的是在网页或应用中,当表格内容过多无法在单个屏幕内完全显示时,为了能够浏览表格的所有数据,所引入的一种交互元素——滚动条。滚动条通常出现在表格的右侧(水平滚动条)或底部(垂直...

    table 列可左右拖动

    "table 列可左右拖动"的功能使得用户可以根据需要调整列宽,提高用户体验,特别是当表格内容较多,需要横向滚动条时,用户可以更方便地查看和操作表格。 实现这一功能通常涉及以下几个关键知识点: 1. **...

    利用JS+CSS实现滚动表格数据展示

    接着,我们用CSS来设置表格的样式,特别是滚动条的样式。CSS允许我们定制滚动条的外观,使其与页面设计更加融合。以下是一些基本的CSS样式: ```css #scrollTable { width: 100%; overflow-y: auto; scrollbar-...

    jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置

    本文将详细介绍如何使用jQuery和JavaScript技术来实现在网页上的Table表格中,通过拖动表头来任意调整列宽度的功能,这个功能适用于各种列表页面,如数据展示、报表分析等场景。 首先,我们需要引入jQuery库,它是...

    Jquery表格添加滚动条插件,固定表头

    例如,它可能提供了自定义滚动条样式、多级表头固定、动态加载数据等功能。要使用这个插件,你需要在HTML文件中引入jQuery库和"superTables.js",并按照插件文档的指引配置和初始化。 总的来说,"Jquery表格添加...

    jquery拖动的table表格的宽度隐藏表格中的内容

    3. **拖动过程**: 绑定`mousemove`事件,当鼠标移动时,计算新的宽度并更新表格列的CSS样式。 4. **结束拖动**: 绑定`mouseup`事件,停止监听鼠标移动,释放资源。 接下来,我们要解决隐藏表格内容的问题。当表格列...

    jquery给表格加滚动条.zip

    接下来,我们将使用CSS来设置表格样式和滚动条效果。CSS可以用来定制滚动条的外观,例如颜色、宽度和箭头样式等。以下是一些基本的CSS代码: ```css #scrollableTable { width: 100%; overflow-y: auto; border-...

    Jquery Table 固定行和列

    这些插件通常会监听滚动事件,计算滚动条的位置,并相应地调整固定元素的位置。 在实际应用中,这个插件可能会使用以下步骤来实现功能: 1. **初始化**:在页面加载完成后,找到表格元素,并为其添加必要的样式和...

    可水平和垂直滚动的jQuery固定单元行表格插件

    可能需要进行的配置包括设置固定表头、指定固定列数,以及调整滚动条样式等。此外,兼容性和性能优化也是需要注意的方面,确保插件在不同浏览器和设备上都能良好运行。 综上所述,"table-scroll"插件是基于jQuery的...

    jQuery插件冻结行列、固定列固定行,html、table实现

    此外,插件还可能提供了其他配置选项,如自定义样式、滚动条宽度等,以满足不同场景的需求。在实际使用中,应仔细阅读插件文档,了解所有可用的API和示例,以便更好地定制和优化。 总结来说,"jQuery-Plugin-To-...

    table无限循环无缝滚动.zip

    此外,CSS还可以用来调整表格的滚动行为,比如使用`overflow: auto`属性来创建滚动条,并通过`position`和`z-index`控制元素的层叠顺序,确保隐藏副本在合适的时候显示。 关键在于JavaScript,它是实现无限循环的...

    jQuery+EasyUI实现头部固定带滚动条table表格特效源码.zip

    本资源"jQuery+EasyUI实现头部固定带滚动条table表格特效源码.zip"提供了一个使用这两者实现的特定功能:在表格数据过多时,保持表头固定,同时在页面内添加滚动条,以方便用户查看和操作。 jQuery是一个轻量级、高...

Global site tag (gtag.js) - Google Analytics