`
dxynidwj
  • 浏览: 3306 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

兼容可变Table宽度

htmljavascriptjquery 
阅读更多
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<style>
.resizeDivClass
{
position:absolute;
background-color:gray;
width:2px;
height:15px;
z-index:1px;
display: block;
cursor:e-resize
}
.td1 {

font-size: 12px;
white-space:nowrap;
color:#0000ff; 
}
</style>
<script language=javascript>
/*
    标题：扩拖拽列表格demo 1.2
    说明：修改了firfox兼容性问题，可以很好的兼容火狐浏览器
    */
    /*
    依赖于jQuery
    */
(function($){
    //用正则表达式判断jQuery的版本
    if (/1\.(0|1|2)\.(0|1|2|3|4|5)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) {
     alert('movedTh 需要 jQuery v1.2.6 以后版本支持!  你正使用的是 v' + $.fn.jquery);
    return;
    }
    me=null;
    var ps=3;
    $.fn.movedTh=function(){
        me=this;
        var target = null;
        var tempStr = "";
        var i=0;
        $(me).find("tr:first").find("th").each(function(){
        tempStr = '<div id="mydiv'+i+'"onmousedown="$().mousedone.movedown(event,this)"  ></div>';
            var div={};
            $(this).html($(this).html()+tempStr);
            var offset = $(this).offset();
            var pos=offset.left +$(this).width()+ me.offset().left-ps;
            $("#mydiv"+i).addClass("resizeDivClass");
            $("#mydiv"+i).css("left",pos);
            $("#mydiv"+i).css("top",(offset.top+2));
            i++;
        });    //end each
    }    //end moveTh
    $.fn.mousedone={
        movedown:function(e,obj){
            var d=document;
            var e = window.event||e ;
            var myX = e.clientX||e.pageX;
                obj.mouseDownX=myX ;
                obj.pareneTdW=$(obj).parent().width();    //obj.parentElement.offsetWidth;
                obj.pareneTableW=me.width();
                if(obj.setCapture){
                    obj.setCapture();
                }else if(window.captureEvents){
                    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
                }
            d.onmousemove=function(e){
                var dragData=obj;
                var event = window.event||e ;
                if(!dragData.mouseDownX) return false;
                var newWidth=dragData.pareneTdW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX;
                    if(newWidth>0)
                    {
                        $(obj).parent().width(newWidth);
                        me.width(dragData.pareneTableW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX);
                        var k=0;
                        me.find("tr:first").find("th").each(function(){
                        var offset = $(this).offset();
                        var pos=offset.left*1+$(this).width()*1+me.offset().left*1-ps;
                        $("#mydiv"+k).css("left",pos);
                        k++;
                        })    //end each
                    }//end if
            };
            d.onmouseup=function(e){
                var dragData=obj;
                    if(dragData.setCapture)
                    {
                        dragData.releaseCapture();
                    }else if(window.captureEvents){
    　　　　            window.releaseEvents(e.MOUSEMOVE|e.MOUSEUP);
                    }
                    dragData.mouseDownX=0;
            }
        }
    }    //end mousedone
    $(window).resize(function(){
        setTimeout(function() {
        var target = null;
        var tempStr = "";
        var i=0;
        $(me).find("tr:first").find("th").each(function(){
        tempStr = '<div id="mydiv'+i+'"onmousedown="$().mousedone.movedown(event,this)"  ></div>';
            var div={};
            $(this).html($(this).html()+tempStr);
            var offset = $(this).offset();
            var pos=offset.left +$(this).width()+ me.offset().left-ps;
            $("#mydiv"+i).addClass("resizeDivClass");
            $("#mydiv"+i).css("left",pos);
            i++;
        });    //end each
        }, 10);
    });
})(jQuery)
$().ready(function(){
    $("#tab").movedTh();
})
</script>
</head>
<body onload="">
<table cellpadding="3" id='' STYLE="table-layout:fixed;" >
<tr bgcolor=cccccc >
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr><span style="color:#069">|</span></th>
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr><span style="color:#069">|</span></th>
</tr></table>
<br>
<table cellpadding="3" id='tab' STYLE="table-layout:fixed;" >
<tr bgcolor=cccccc >
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
<th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
</tr>

<tr>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
</tr>
<tr>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
</tr>
<tr>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
</tr>
<tr>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
<td class="td1"><nobr>改变table的列宽度</nobr></td>
</tr>
</table>
</body>
</html>
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于ElementUI二次封装的支持自适应列宽的tablecolumn列组件

    它由多个table-column定义，每个table-column对应表格的一列，可以设置字段名、标题、宽度等属性。二次封装的过程就是对这些table-column进行扩展，添加新的功能和行为。 在实现自适应列宽的功能时，我们可能会采用...

    bootstrap-table拖拽表格改变列宽

    在“bootstrap-table拖拽表格改变列宽”这个主题中，我们将深入探讨如何实现用户可以动态调整表格列宽的功能，同时确保兼容主流浏览器，并保持表格的body部分与header部分对齐。 首先，我们需要引入必要的CSS和JS库...

    table-editor-obsidian,Obsidian表格插件，让你更好的体验笔记工具

    总的来说，“table-editor-obsidian”插件是Obsidian用户不可或缺的工具之一，它增强了Markdown笔记中的表格功能，使你能够更专业、更高效地管理信息。无论是学术研究、项目管理还是日常知识梳理，这款插件都将助你...

    colResizable.js 全版本 1.0-1.6 table列可拖动宽度插件 有demo

    colResizable.js 是一个JavaScript插件，专为HTML表格（table）设计，允许用户通过拖动来动态调整表格列的宽度。这个插件适用于那些需要提供用户自定义界面体验的项目，尤其是在处理大量数据并需要用户根据自身需求...

    JS实现可改变列宽的table实例

    8. 网页兼容性：在涉及鼠标事件和样式修改的实现中，需要考虑到不同浏览器间的兼容性问题，确保在主流浏览器中都能够正常工作。 通过上述知识点的介绍，我们可以了解到实现表格列宽动态调整的基本原理和技术要点。...

    bootstrap-table-demo-

    10. **丰富的扩展**：除了基础功能，Bootstrap Table 还有许多可选的扩展插件，如固定列、过滤器、行选择、树形结构等，可以进一步增强表格功能。 在"bootstrap-table-demo"中，你可能找到以下内容： 1. HTML文件...

    Table固定指定列进行横向滚动(可拓展)

    标题“Table固定指定列进行横向滚动(可拓展)”就描述了这样一个解决方案。 在这个解决方案中，我们有两个关键文件：`Index.html` 和 `Index.js`。`Index.html` 是页面的结构，它包含了一个表格元素，并且可能已经...

    table表头及列固定

    在网页设计中，数据展示是不可或缺的一部分，而`table`元素是HTML中用于展示结构化数据的标准工具。本文将深入探讨如何使用`table`元素，并结合jQuery实现表头及列的固定，以便在滚动时保持关键信息可见，提高用户...

    CSS样式Table[7] - table_zebra

    在这个例子中，我们首先设置了整个表格的宽度为100%，并使用`border-collapse`属性合并了单元格之间的边框。接着，我们为表头单元格（`&lt;th&gt;`）和普通单元格（`&lt;td&gt;`）添加了内边距、文本对齐方式和底部边框。 关键...

    vim table plugin

    Vim 是一款强大的文本编辑器，以其高效的操作和高度可定制性深受程序员和文本工作者的喜爱。在 Vim 中，用户可以通过安装各种插件来扩展其功能，以满足不同的需求。"vim table plugin" 提到的就是一个专门用于处理...

    用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例

    调整表格单元格（cell）的宽度（width）和高度（height）在不同的浏览器中可能会遇到兼容性问题，尤其是早期的IE浏览器版本（IE6, IE7, IE8）。本知识点将通过实例讲解如何使用JavaScript（js）结合CSS和HTML，实现...

    网页模板——jQuery实现表格头和列固定插件RWD Table.zip

    3. **响应式布局**：使用媒体查询（Media Queries）来检测设备的视口宽度，当屏幕变小时，调整表格布局，比如将表格转换为垂直堆叠的列表，以适应小屏幕。 4. **兼容性和性能优化**：为了确保在各种浏览器上的兼容...

    colResizable-1.5 （table 列大小可拖动）

    "colResizable-1.5（table列大小可拖动）"是一个基于jQuery的JavaScript插件，主要用于增强HTML表格的功能，使用户能够通过鼠标拖动来调整表格列的宽度，从而提高数据查看和分析的便捷性。这个插件适用于那些需要...

    div+css 完全兼容 样式兼容性 ie6 ie7 IE8 IE9 和firefox方法

    2. **盒模型兼容性**：IE6-8使用的是“怪异盒模型”，其中元素宽度包括了内边距和边框，而其他浏览器遵循W3C标准盒模型。解决方法是在CSS中使用`box-sizing:border-box;`或针对IE使用`*html`或`_width`前缀。 3. **...

    CSS兼容IE和Firefox的技巧集合.rar

    8. `display`属性：IE6不支持`display: inline-block`，可以使用`display: -moz-inline-stack`为Firefox提供支持，或者使用`display: inline-table`作为兼容性较好的回退方案。 9. 非标准属性：IE6和7支持一些非...

    浅谈 div 与 table 如何取舍结合利用

    在考虑兼容性时，`table` 通常更为保险，但 `div` 结合 CSS3 可以实现更多现代效果。 5. **复杂性**：在处理复杂的布局时，`table` 可能更难以理解和调试，而 `div` 可以通过 CSS Grid 或 Flexbox 提供更直观的解决...

    CSS浏览器兼容问题整理

    CSS浏览器兼容性问题是前端开发中不可避免的一个环节。通过对不同浏览器特性的深入了解以及采用相应的兼容性解决方案，可以有效地提升网站的用户体验。本文列举了一些常见的兼容性问题及解决方案，并给出了具体的...

    拿什么来拯救你，我的table(海玉博客)

    在默认的`auto`模式下，表格宽度依赖于内容，可能导致加载速度变慢。而`fixed`模式则基于列的宽度和表格宽度属性快速计算布局，对于复杂的表格设计，特别是需要限制单元格宽度的情况，使用`table-layout: fixed`可以...

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