`
mr.lili
  • 浏览: 152453 次
  • 性别: 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> 
分享到：
| jquery获得同窗口里iframe页面里的form序列 ...
评论
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是一个轻量级、高...

Magicbox
Global site tag (gtag.js) - Google Analytics