`

可调节列宽的JavaScript示例

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #333333;
}
-->
</style>
</head>

<body>
<div>
<table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;">
 <colgroup>
  <col style="width:200px;" />
  <col style="width:100px;" />
  <col style="width:100px;" />
  <col style="width:100px;" />
  <col style="width:100px;" />
 </colgroup>
 <tr>
  <td>拖动我1</td>
  <td>拖动我2</td>
  <td>拖动我3</td>
  <td>拖动我4</td>
  <td>拖动我5</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
</table>
</div>
<script language="javascript" type="text/javascript">
var JPos = {};
(function($){
 
 $.getAbsPos = function(pTarget){
  var x_ = y_ = 0;
 
  if(pTarget.style.position != "absolute"){ 
   while(pTarget.offsetParent){
     x_ += pTarget.offsetLeft;
     y_ += pTarget.offsetTop;
     pTarget = pTarget.offsetParent;
   }
  }
   x_ += pTarget.offsetLeft;
   y_ += pTarget.offsetTop;
  return {x:x_,y:y_};
 }
 
 $.getEventPos = function(evt){
   var _x,_y;
   evt = JEvent.getEvent(evt);
   if(evt.pageX || evt.pageY){
    _x = evt.pageX;
    _y = evt.pageY;
   }else if(evt.clientX || evt.clientY){
    _x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft);
    _y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop);
   }else{
    return $.getAbsPos(evt.target);
   }
   return {x:_x,y:_y};
 }
 
})(JPos);

//=======================================================================================

var JEvent = {};
(function($){
 $.getEvent = function(evt){    
  evt = window.event || evt;
    
  if(!evt){
   var fun = JEvent.getEvent.caller;
   while(fun != null){
    evt = fun.arguments[0];
    if(evt && evt.constructor == Event)
     break;
    fun = fun.caller;
   }
  }
  
  return evt;
 }
 
 $.doEvent = function(fun){
  var args = arguments;
  return function(){
   return fun(args);
  }
 }
})(JEvent);
//=======================================================================================

var colIndex;
var dataTable = document.getElementById("dataTable");
var cols = dataTable.getElementsByTagName("COL");

var dragMask = document.createElement("DIV");
var mAWidth = mAHeight = 300;
document.body.insertBefore(dragMask,document.body.lastChild);
dragMask.style.cssText = "width:" + mAWidth + "px;height:" + mAHeight + "px;position:absolute;background-color:#000;filter: Alpha(Opacity=10);-moz-opacity:0.1;opacity: 0.1;display:none;z-index:999999999;display:none;";

var mask_mousemove = function(evt){
 if(document.selection){//IE ,Opera
  if(document.selection.empty)
   document.selection.empty();//IE
  else{//Opera
   document.selection = null;
  }
 }else if(window.getSelection){//FF,Safari
  window.getSelection().removeAllRanges();
 }
 
 var oPos = JPos.getAbsPos(this);
 var mPos = JPos.getEventPos(evt);
 
 var x = mPos.x - oPos.x - mAWidth / 2;
 var tmpX = parseInt(cols[colIndex].style.width) + x;
 dragMask.style.left = mPos.x - mAWidth / 2 + "px";
 cols[colIndex].style.width = tmpX >= 2 ? tmpX + "px" : "2px";
 if(!document.all)
  dataTable.parentNode.style.width = dataTable.parentNode.clientWidth + x + "px";//这一句为处理FF时用。
}

var mask_mouseup = function(evt){
 dragMask.style.display = "none";
}

dragMask.onmousemove = mask_mousemove;
dragMask.onmouseup = mask_mouseup;

var cell_mousedown = function(evt){
 colIndex = this.colIndex;
 var mPos = JPos.getEventPos(evt);
 with(dragMask.style){
  left = mPos.x - mAWidth / 2  + "px";
  top = mPos.y - mAHeight / 2 + "px";
  display = "";
 }
}

var chk_click = function(evt){
 var obj = cols[this.colIndex];
 if(this.checked){
  obj.style.cssText = obj.css_ ? obj.css_ : "width:100px;";
 }else{
  obj.css_ = obj.style.cssText;
  obj.style.cssText = document.all ? "display:none" : "visibility: collapse;overflow:hidden;width:0px;";
 }
}

var i , o;
var label ,chk;
for(i = 0 ; o = dataTable.rows[0].cells[i] ; i++){
 o.colIndex = i;
 o.onmousedown = cell_mousedown;
 
 label = document.createElement("LABEL");
 document.body.insertBefore(label,document.body.lastChild);
 chk = document.createElement("INPUT");
 chk.type = "checkbox";
 label.appendChild(chk);
 chk.onclick = chk_click;
 chk.colIndex = i;
 chk.checked = "checked";
 label.appendChild(document.createTextNode(o.innerHTML));
}
</script>
</body>
</html>
分享到:
评论

相关推荐

    实现bootstrap table可设置列宽和可拖动列宽

    - `bootstrap-table-colresize.min.js`:拖动列宽插件的 JavaScript 文件,实现拖动功能。 - 示例 HTML 文件:展示如何在实际代码中应用以上设置和插件。 - 示例数据文件:可能包含用于填充表格的数据。 总之,实现...

    可缩放Reloaded-一个针对可缩放元素的复用组件

    - **调节栏**:组件支持显示蓝色的调节栏,默认为`pinned: true`。此特性可以帮助用户直观地看到元素大小的变化情况。 示例: ```javascript var custom = new YAHOO.ext.Resizable('custom', { wrap: true, ...

    ko-grid:用于显示表格数据的可扩展 UI 组件

    ko-grid ko-grid 是一个可扩展的 UI 组件,用于显示表格数据。 它是基于的,其绑定名称只是grid 。 如果您想了解 ko-grid 的实际运行情况,可以查看一些。 相应的源位于。 要开始,请查看中的简短、自包含示例。特征...

    常用1.SchLib

    常用1.SchLib

    tokenizers-0.26.0.jar中文文档.zip

    # 【tokenizers-***.jar***文档.zip】 中包含: ***文档:【tokenizers-***-javadoc-API文档-中文(简体)版.zip】 jar包下载地址:【tokenizers-***.jar下载地址(官方地址+国内镜像地址).txt】 Maven依赖:【tokenizers-***.jar Maven依赖信息(可用于项目pom.xml).txt】 Gradle依赖:【tokenizers-***.jar Gradle依赖信息(可用于项目build.gradle).txt】 源代码下载地址:【tokenizers-***-sources.jar下载地址(官方地址+国内镜像地址).txt】 # 本文件关键字: tokenizers-***.jar***文档.zip,java,tokenizers-***.jar,ai.djl.huggingface,tokenizers,***,ai.djl.engine.rust,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,djl,huggingface,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法: 解压 【tokenizers-***.jar***文档.zip】,再解压其中的 【tokenizers-***-javadoc-API文档-中文(简体)版.zip】,双击 【index.html】 文件,即可用浏览器打开、进行查看。 # 特殊说明: ·本文档为人性化翻译,精心制作,请放心使用。 ·只翻译了该翻译的内容,如:注释、说明、描述、用法讲解 等; ·不该翻译的内容保持原样,如:类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示: (1)为了防止解压后路径太长导致浏览器无法打开,推荐在解压时选择“解压到当前文件夹”(放心,自带文件夹,文件不会散落一地); (2)有时,一套Java组件会有多个jar,所以在下载前,请仔细阅读本篇描述,以确保这就是你需要的文件; # Maven依赖: ``` <dependency> <groupId>ai.djl.huggingface</groupId> <artifactId>tokenizers</artifactId> <version>***</version> </dependency> ``` # Gradle依赖: ``` Gradle: implementation group: 'ai.djl.huggingface', name: 'tokenizers', version: '***' Gradle (Short): implementation 'ai.djl.huggingface:tokenizers:***' Gradle (Kotlin): implementation("ai.djl.huggingface:tokenizers:***") ``` # 含有的 Java package(包): ``` ai.djl.engine.rust ai.djl.engine.rust.zoo ai.djl.huggingface.tokenizers ai.djl.huggingface.tokenizers.jni ai.djl.huggingface.translator ai.djl.huggingface.zoo ``` # 含有的 Java class(类): ``` ai.djl.engine.rust.RsEngine ai.djl.engine.rust.RsEngineProvider ai.djl.engine.rust.RsModel ai.djl.engine.rust.RsNDArray ai.djl.engine.rust.RsNDArrayEx ai.djl.engine.rust.RsNDArrayIndexer ai.djl.engine.rust.RsNDManager ai.djl.engine.rust.RsSymbolBlock ai.djl.engine.rust.RustLibrary ai.djl.engine.rust.zoo.RsModelZoo ai.djl.engine.rust.zoo.RsZooProvider ai.djl.huggingface.tokenizers.Encoding ai.djl.huggingface.tokenizers.HuggingFaceTokenizer ai.djl.huggingface.tokenizers.HuggingFaceTokenizer.Builder ai.djl.hu

    电力系统PMU优化配置研究——基于MATLAB的多种算法实现与性能比较

    内容概要:本文详细探讨了电力系统中PMU(相量测量单元)的优化配置问题,旨在确保系统完全可观测的同时尽量减少PMU的数量。作者介绍了六种不同的算法,包括模拟退火、图论方法、递归安全N算法等,并通过MATLAB实现了这些算法。通过对IEEE标准测试系统的实验,展示了各种算法在不同规模系统中的表现。文中不仅提供了具体的MATLAB代码实现,还分享了许多实用的经验技巧,如邻域解生成、退火速率设置、拓扑排序等。 适合人群:从事电力系统研究的技术人员、研究生以及对组合优化感兴趣的科研工作者。 使用场景及目标:适用于电力系统状态估计、故障诊断等领域,帮助研究人员和工程师找到最优的PMU配置方案,提高系统的可靠性和经济性。 其他说明:文章强调了在实际应用中需要注意的问题,如变压器支路的影响、节点编号不连续等问题,并推荐了几篇相关领域的经典文献供进一步学习。此外,还提到了一些有趣的发现,如某些中间节点装PMU反而能减少总数。

    spring-ai-mistral-ai-1.0.0-M5.jar中文文档.zip

    # 压缩文件中包含: 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字: jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法: 解压最外层zip,再解压其中的zip包,双击 【index.html】 文件,即可用浏览器打开、进行查看。 # 特殊说明: ·本文档为人性化翻译,精心制作,请放心使用。 ·只翻译了该翻译的内容,如:注释、说明、描述、用法讲解 等; ·不该翻译的内容保持原样,如:类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示: (1)为了防止解压后路径太长导致浏览器无法打开,推荐在解压时选择“解压到当前文件夹”(放心,自带文件夹,文件不会散落一地); (2)有时,一套Java组件会有多个jar,所以在下载前,请仔细阅读本篇描述,以确保这就是你需要的文件;

    三菱FX1s与台达MS300变频器基于Modbus RTU通讯的实战指南

    内容概要:本文详细介绍了三菱FX1s PLC与台达MS300变频器通过Modbus RTU协议实现通讯的方法。首先,文中列举了所需的硬件设备及其连接方法,确保PLC与变频器能够正常通信。接下来,针对频率设定、频率读取及正反转启停控制三大主要功能进行了详细的编程讲解,提供了具体的梯形图代码示例并解释了每一步的作用。此外,还涉及到了触摸屏(MCGS和威纶通)的配置步骤,使用户可以通过触摸屏方便地操作变频器的各项功能。最后,作者分享了一些实用的小技巧和常见错误避免方法,帮助使用者快速解决问题,提高工作效率。 适合人群:从事自动化控制系统集成的技术人员,尤其是那些需要将三菱PLC与台达变频器进行互联的工程师。 使用场景及目标:适用于工业自动化领域的项目实施过程中,旨在帮助技术人员掌握三菱FX1s与台达MS300变频器之间的高效通信技术,从而更好地完成系统集成任务。 其他说明:文中不仅包含了详细的理论知识和技术要点,还有丰富的实践经验分享,有助于读者全面理解和应用相关技术。同时,提供的完整工程文件可以直接应用于实际项目中,极大地节省了开发时间和成本。

    winrar免费版压缩工具

    winrar免费版压缩工具

    基于CEC21测试函数的灰狼、鲸鱼、人工蜂群优化算法性能对比及Matlab实现

    内容概要:本文详细介绍了灰狼算法(GWO)、鲸鱼算法(WOA)和人工蜂群算法(ABC)在CEC21标准测试函数集上的性能对比。通过设定相同的实验条件(种群数量50,迭代次数500次,30维问题空间),分别探讨了各算法的关键参数调整及其对不同类型函数(单峰、多峰、复合)的影响。文中提供了每个算法的核心代码片段,并针对具体函数给出了优化建议。最终结果显示,GWO在单峰函数上有优势,WOA擅长处理旋转和平移问题,而ABC在高维复杂环境中表现出色。 适合人群:从事优化算法研究的科研人员、研究生以及对智能优化算法感兴趣的开发者。 使用场景及目标:适用于需要评估和比较不同优化算法性能的研究项目,特别是那些涉及高维、多峰、旋转平移等问题的实际应用场景。目标是帮助研究人员选择最适合特定任务的优化算法,并提供参数调优的经验。 其他说明:文章不仅提供了理论分析,还分享了许多实践经验,如参数调整技巧、初始化方法等。此外,所有实验均基于Matlab平台完成,附带完整的代码实现,方便读者复现实验结果。

    电控开关.SchLib

    电控开关.SchLib

    spring-ai-autoconfigure-model-openai-1.0.0-M7.jar中文-英文对照文档.zip

    # 【spring-ai-autoconfigure-model-openai-1.0.0-M7.jar中文-英文对照文档.zip】 中包含: 中文-英文对照文档:【spring-ai-autoconfigure-model-openai-1.0.0-M7-javadoc-API文档-中文(简体)-英语-对照版.zip】 jar包下载地址:【spring-ai-autoconfigure-model-openai-1.0.0-M7.jar下载地址(官方地址+国内镜像地址).txt】 Maven依赖:【spring-ai-autoconfigure-model-openai-1.0.0-M7.jar Maven依赖信息(可用于项目pom.xml).txt】 Gradle依赖:【spring-ai-autoconfigure-model-openai-1.0.0-M7.jar Gradle依赖信息(可用于项目build.gradle).txt】 源代码下载地址:【spring-ai-autoconfigure-model-openai-1.0.0-M7-sources.jar下载地址(官方地址+国内镜像地址).txt】 # 本文件关键字: spring-ai-autoconfigure-model-openai-1.0.0-M7.jar中文-英文对照文档.zip,java,spring-ai-autoconfigure-model-openai-1.0.0-M7.jar,org.springframework.ai,spring-ai-autoconfigure-model-openai,1.0.0-M7,org.springframework.ai.model.openai.autoconfigure,jar包,Maven,第三方jar包,组件,开源组件,第三方

    c++复习题.doc

    c++复习题.doc

    附件3:本科毕业设计(论文)中期检查报告(3)(1)(1).docx

    本科毕业设计(论文)中期检查报告

    【信号调制】使用不同的分类器(逻辑回归分类器、决策树、随机森林、全连接密集层和CNN)来训练模型,以预测不同信噪比值下信号的调制类型附Python代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    weixin248食堂订餐小程序ssm(文档+源码)_kaic

    weixin248食堂订餐小程序ssm(文档+源码)_kaic

    基于粒子群优化算法的微型燃气轮机冷热电联供系统优化调度附Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    e1e90185ca2f1eda312e7f604d38195c_b4125f83523abcb38acd9dc0deebd500.png

    e1e90185ca2f1eda312e7f604d38195c_b4125f83523abcb38acd9dc0deebd500

    spring-ai-autoconfigure-mcp-client-1.0.0-M7.jar中文-英文对照文档.zip

    # 【spring-ai-autoconfigure-mcp-client-1.0.0-M7.jar中文-英文对照文档.zip】 中包含: 中文-英文对照文档:【spring-ai-autoconfigure-mcp-client-1.0.0-M7-javadoc-API文档-中文(简体)-英语-对照版.zip】 jar包下载地址:【spring-ai-autoconfigure-mcp-client-1.0.0-M7.jar下载地址(官方地址+国内镜像地址).txt】 Maven依赖:【spring-ai-autoconfigure-mcp-client-1.0.0-M7.jar Maven依赖信息(可用于项目pom.xml).txt】 Gradle依赖:【spring-ai-autoconfigure-mcp-client-1.0.0-M7.jar Gradle依赖信息(可用于项目build.gradle).txt】 源代码下载地址:【spring-ai-autoconfigure-mcp-client-1.0.0-M7-sources.jar下载地址(官方地址+国内镜像地址).txt】 # 本文件关键字: spring-ai-autoconfigure-mcp-client-1.0.0-M7.jar中文-英文对照文档.zip,java,spring-ai-autoconfigure-mcp-client-1.0.0-M7.jar,org.springframework.ai,spring-ai-autoconfigure-mcp-client,1.0.0-M7,org.springframework.ai.mcp.client.autoconfigure,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,springfram

    基于 OpenCV 的图像颜色与形状识别项目(含完整 Python 源码)

    该项目使用 OpenCV 实现图像中红色目标的识别与轮廓框选,适用于图像处理、颜色追踪与形状检测等场景。项目无需深度学习框架,适合图像识别技术入门学习。附带测试图像与运行说明,支持一键运行。

Global site tag (gtag.js) - Google Analytics