<!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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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>
分享到：
相关推荐
在网页设计中，"可调整列宽TABLE"是一种常见的交互式数据展示技术，它使得用户可以根据需要自由调整表格中列的宽度。这种功能通常应用于数据量大、信息丰富的表格，以便用户能更清晰地查看和理解数据。下面将详细...
jQuery作为一个强大的JavaScript库，提供了丰富的插件来增强HTML表格的功能，其中包括能够允许用户手动拖动调整列宽的插件。 本例中提到的插件名为ZTable，它是一个基于jQuery的扩展，专门针对HTML表格的列宽调整...
CSS可能用于设置边框、光标等视觉效果，使用户能清楚地看到可调整的列宽指示。 实例中的DEMO页面会展示一个已经实现了拖动调整列宽功能的表格，用户可以通过鼠标左键点击列边框并拖动来改变列的宽度。这个功能的...
- `bootstrap-table-colresize.min.css`：拖动列宽插件的 CSS 文件，用于调整样式。 - `bootstrap-table-colresize.min.js`：拖动列宽插件的 JavaScript 文件，实现拖动功能。 - 示例 HTML 文件：展示如何在实际代码...
在“bootstrap-table拖拽表格改变列宽”这个主题中，我们将深入探讨如何实现用户可以动态调整表格列宽的功能，同时确保兼容主流浏览器，并保持表格的body部分与header部分对齐。 首先，我们需要引入必要的CSS和JS库...
本文将深入探讨如何实现“拖动table单元格改变列宽或行高”的功能，以及这一特性在表格设计器中的应用。 首先，我们要理解HTML表格的基本结构。一个HTML表格由`<table>`元素定义，包含多个`<tr>`（行）元素，每个`...
"bootstrapTable 实现列宽可拖动"的特性就是为了解决这个问题，让用户可以通过鼠标拖动来动态调整表格列的宽度。 要实现这个功能，首先你需要确保在项目中已经引入了 BootstrapTable 的基础库和相应的 CSS、JS 文件...
"table实现列宽的拖动效果"是一个常见的需求，特别是在数据展示或者数据分析的应用中，用户可能需要自定义表格列的宽度以更好地查看和理解数据。这篇博客文章 "https://jifeng3321.iteye.com/blog/2403674" 提到的...
"table得列宽拖拽插件"正是这样一个工具，它允许用户通过拖拽操作来调整表格（table）中的列宽，以便更好地展示或隐藏内容。这种功能在处理数据密集型的表格时尤为实用，用户可以根据自身需求自由调整列宽，使得重要...
### ListView 自动调整列宽 #### 概述 在Windows Forms开发中，`ListView` 控件是一种非常实用的工具，用于展示数据列表。它能够以不同的视图模式（如图标、详细信息等）来显示数据，并支持多种特性，如自定义列宽...
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
在创建可调整列宽的表格时，我们需要为每个 `<th>` 或 `<td>` 添加一个拖动柄（通常是一个CSS样式处理的小竖线），用户可以通过拖动这个柄来改变列宽。 在"moveTab.js"中，我们可能会看到以下关键代码片段： 1. **...
当鼠标在table两列头之间时，鼠标变成双箭头，拖动鼠标可以调节table列的宽度。
vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在...若将ve-table封装以组件形式引用，可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。
GridView自定义分页及可拖动改变列宽代码 GridView自定义分页及可拖动改变列宽代码 GridView自定义分页及可拖动改变列宽代码 GridView自定义分页及可拖动改变列宽代码 GridView自定义分页及可拖动改变列宽代码 ...
这个插件具有全浏览器兼容性的特点，意味着无论用户使用的是哪一种主流浏览器（如Chrome、Firefox、Safari、Edge或Internet Explorer），都能享受到同样的拖动调整体验。这对于开发者来说是一个巨大的优势，因为不...
本demo使用jQuery包，实现表格列宽可拖拽功能，并实现页面reset时的重新布局。使用jQuery，方便函数的调用，给要处理的表格添加id 后，直接调用$("#id").movedTh()即可方便实现，修改了firfox的兼容性。
在网页开发中，数据展示通常会使用到表格（Table）元素，而为了提供更好的用户体验，开发者经常需要实现用户可以自由调整表格列宽的功能。本文将详细介绍如何使用jQuery和JavaScript技术来实现在网页上的Table表格中...
Resizable插件是一个可选功能，它允许表格列宽能够被拖动调整。要使用这个功能，首先需要引入Resizable插件的相关文件。根据文件内容，需要引入两个js文件：colResizable-1.6.min.js和extensions/bootstrap-table-...
6. **兼容性与适应性**：在不同的操作系统或屏幕分辨率下，自动调整列宽的算法可能需要有所不同，以确保在各种环境下都能正常工作。 在压缩包内的“超级列表框自动调整列宽”文件可能包含了源代码、示例程序或者...