`

可调节列宽的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 的实际运行情况,可以查看一些。 相应的源位于。 要开始,请查看中的简短、自包含示例。特征...

    cmd-bat-批处理-脚本-Screenshot.zip

    cmd-bat-批处理-脚本-Screenshot.zip

    升\降压电路的自计算表格 及 公式表达

    公式主要来自于德州仪器的datasheet 以及 一些电路公式表达式

    2025年自动检测生产线项目大数据研究报告.docx

    2025年自动检测生产线项目大数据研究报告.docx

    cmd-bat-批处理-脚本-deactivate.zip

    cmd-bat-批处理-脚本-deactivate.zip

    cmd-bat-批处理-脚本-happy05 1.zip

    cmd-bat-批处理-脚本-happy05 1.zip

    基于MATLAB的单相光伏并网逆变器仿真研究

    在单相光伏逆变器相关领域,涉及诸多关键环节。首先,光伏系统建模是基础,其中光伏板作为能量来源,其特性建模至关重要。最大功率点跟踪(MPPT)技术用于确保光伏板输出功率最大化,而Boost升压电路则负责将光伏板输出的较低电压提升至适合逆变器处理的水平。在控制策略方面,电压电流双闭环控制是实现稳定输出的关键,通过精确控制电压和电流,保证逆变器的性能。最终目标是使并网电流波形达到标准正弦波形,以满足电网接入要求。希望与大家深入交流这些内容,共同探讨技术细节与优化方案。

    cmd-bat-批处理-脚本-JoinDomain.zip

    cmd-bat-批处理-脚本-JoinDomain.zip

    cmd-bat-批处理-脚本-ppcp.zip

    cmd-bat-批处理-脚本-ppcp.zip

    最新修复版走路赚钱乐步2.0任务平台系统源码

    内附详细安装教程,亲测搭建无问题。 一、乐步交易流程----购买乐步糖果 方法一:在卖方市场选择合适的卖家或者用手机号定向查询特定卖家 步骤一:点击首页下方【交易中心】。 步骤二:点击【卖单列表】,选择合适的卖家或者用手机号搜索特定卖家,确定卖家之后点击该卖家后方的【购买】。 步骤三:点击之后,系统会显示该卖家的收款信息。按照系统显示的收款信息付款,(付款备注交易订单号)付款完成之后上传凭证,等待卖家确认收款并且支付糖果。 方法二:挂单买入糖果 步骤一:点击首页下方【交易中心】。 步骤二:点击【买单列表】--【发布买单】,填写购买糖果单价、数量、交易密码,点击【确定】,买单发布,等待匹配成交。 二、乐步交易流程----出售乐步糖果 方法一:在买方市场选择合适的买家或者用手机号定向查询特定买家 步骤一:点击首页下方【交易中心】。 步骤二:点击【买单列表】,选择合适的买家或者用手机号搜索特定买家,确定买家之后点击该买家后方的【出售】。 步骤三:点击之后,系统会提示买家付款,买家按照系统提示的账号给卖家付款(付款备注交易订单号),付款完成之后上传凭证,等待卖家确定并且支付糖果。 方法二:挂单卖出糖果 步骤一:点击首页下方【交易中心】。 步骤二:点击【卖单列表】--【发布卖单】,填写出售糖果单价、数量、验证码、交易密码,点击【确定】,卖单发布,等待匹配成交。

    多媒体技术及应用实验三(音视频编码转换软件开发)

    包括一个python源程序和一个.exe文件

    永磁同步电机速度环控制中的多种PID自整定技术及其应用 RBF神经网络

    内容概要:本文探讨了永磁同步电机(PMSM)速度环控制中多种PID自整定技术的应用,包括RBF神经网络PID、基于分解合并机制的RBF神经网络PID、基于小波神经网络的PID、粒子群算法优化PID、天牛须算法优化PID以及模糊PID自整定。每种技术都通过具体的数学模型和代码片段进行了详细的解释,旨在提升PMSM速度环控制的精度和效率。 适合人群:从事电机控制系统研究和开发的技术人员,尤其是对PID自整定技术和智能算法感兴趣的工程师。 使用场景及目标:适用于需要改进现有PMSM速度环控制系统的场合,目标是通过引入先进的PID自整定技术,提高系统的响应速度、稳定性和鲁棒性。 其他说明:文中不仅介绍了各种技术的基本原理,还提供了部分Python代码示例,帮助读者更好地理解和实践这些方法。同时,强调了不同技术之间的对比和优势,便于读者根据实际情况选择最合适的技术路径。

    桔子云测评小程序V1.1.1+前端.zip

    桔子云测评小程序,做专业测评系统小程序平台,支持微信小程序和抖音小程序,为网友提供心理测试,帮助你更好地了解自己的兴趣、性格、能力等特点,找到适合自己的成长之路。 盈利模式 流量主、激励视频解锁、单独付费测评、VIP会员付费等 功能特色 1、支持定义3种题型:单题型、多题型、 有因子多题型 2、 因子题型支持算法自定义分析 3、答案支持单独自定义分享海报 4、IOS端可设置联系客服索取激活码付费方式 5、支持量表导入 6、支持跳转其他小程序 7、支持分销推广 版本号:1.1.1 – 多开商业版 【修复】添加项目出现分类串联问题 【修复】快速测试出现结果错误问题 【优化】重新测试体验流程 toutiao前端、微信前端都需要提交审核

    2025年职称计算机考试题型及大纲.doc

    2025年职称计算机考试题型及大纲.doc

    cmd-bat-批处理-脚本-TV no signal color bars.zip

    cmd-bat-批处理-脚本-TV no signal color bars.zip

    实证数据-2009-2023上市公司-绿色治理绩效数据-社科经管.rar

    该数据集为2009-2023年中国上市公司绿色治理绩效(GGP)面板数据,覆盖1557家上市公司,数据来源于华证ESG评级、上市公司年报及社会责任报告等公开披露信息。核心指标包括污染物排放达标/未达标得分、突发环境事故、环境违法事件、ISO14001认证情况等12项环境治理指标,采用Janis-Fadner系数法计算综合绩效值(GGP),反映企业在环境合规、绿色运营及社会责任履行等方面的表现。数据经学术团队整理校验,参考《管理世界》等期刊的测度方法,可直接用于ESG表现、绿色创新等领域的实证研究。部分样本包含财务指标匹配数据,便于多维度分析。

    基于GJO-TCN-BiGRU-Attention的Matlab多变量时间序列预测算法及应用 BiGRU Matlab源码与数据集:GJO-TCN-BiGRU-Attention金豹算法优化多变量时间

    内容概要:本文介绍了利用Matlab实现的基于GJO-TCN-BiGRU-Attention算法的时间序列预测方法。该方法结合了时间卷积网络(TCN)、双向门控循环单元(BiGRU)以及注意力机制,用于多变量时间序列预测。文中详细描述了模型架构的设计思路及其各部分的功能,如TCN层用于捕捉长期依赖关系,BiGRU处理双向时序特征,而注意力层则赋予不同特征不同的权重。此外,还探讨了参数优化的方法——采用金豹优化(GJO)算法调整学习率、神经元数目、注意力机制的关键参数等超参数,并提供了完整的源代码和数据集。实验结果显示,该模型在电力负荷预测任务中表现出色,相比单一模型提升了大约8个百分点。 适用人群:对时间序列预测感兴趣的科研工作者、研究生及以上水平的数据科学家和技术爱好者。 使用场景及目标:适用于需要进行高精度多变量时间序列预测的应用场合,比如能源管理系统的负荷预测、金融市场趋势分析等领域。目标是提高预测准确性,降低误差。 其他说明:文中提到一些实践经验,例如避免TCN层数过多导致梯度爆炸的问题,推荐使用RobustScaler进行数据标准化处理,以及选择合适的序列滑窗长度等技巧。

    二十四节气之立秋节气介绍.pptx

    二十四节气之立秋节气介绍.pptx

Global site tag (gtag.js) - Google Analytics