<!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>
分享到：
相关推荐
常用javascript示例 20类343个示例文件 包含常用小游戏、applet、链接类、色彩类、格式表、表格类、数学类、窗口类、菜单类、滚动条、图片类、日期类、鼠标类、键盘类、按钮类、状态栏、属性类、loading、资料夹和...
在JavaScript的世界里，创建一个可调整列宽的表格是一个常见的需求，特别是在开发交互式Web应用时。本主题将深入探讨如何实现这样的功能，基于提供的"moveTable.html"和"moveTab.js"文件。 首先，我们需要了解HTML...
"可拖列宽gridview"是GridView的一个高级特性，允许用户通过拖动列头来调整列的宽度，提高用户体验。 在描述中，反复提到"可拖列宽的gridview"，这表明这个特性是讨论的重点。实现这个功能通常涉及以下步骤： 1. *...
此外，ES6（ECMAScript 2015）引入了许多新特性，如箭头函数、解构赋值、模板字符串、let和const声明、类和模块等，极大地提升了JavaScript的表达力和可维护性。 JavaScript还有一套完整的错误处理机制，通过try......
javascript示例代码.rarjavascript示例代码.rar
示例代码JavaScript 数据校验 正则表达式 示例代码JavaScript 数据校验 正则表达式 示例代码JavaScript 数据校验 正则表达式 示例代码JavaScript 数据校验 正则表达式 示例代码JavaScript 数据校验 正则表达式 示例...
示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript ...
标题 "USB-ID通用免动动读卡器JavaScript示例源码.rar" 提供的信息表明，这是一个使用JavaScript编写的示例代码，目标是实现通过USB接口的RFID读卡器读取RFID卡片的ID。RFID（Radio Frequency Identification）是一...
用户登录 示例代码JavaScript 数据校验 用户登录 示例代码JavaScript 数据校验 用户登录 示例代码JavaScript 数据校验 用户登录 示例代码JavaScript 数据校验 用户登录 示例代码JavaScript 数据校验 用户登录 示例...
比较好的C＋＋解析Javascript示例，实现的功能有： 1.C＋＋创建对象Javascript调用 2.Javascript 创建对象C＋＋调用 3.C＋＋创建函数由Javascript回调 4.Javascript创建函数由C++回调 ...
"bootstrapTable 实现列宽可拖动"的特性就是为了解决这个问题，让用户可以通过鼠标拖动来动态调整表格列的宽度。 要实现这个功能，首先你需要确保在项目中已经引入了 BootstrapTable 的基础库和相应的 CSS、JS 文件...
这个压缩包"一个有趣而棘手的JavaScript示例列表.zip"显然包含了一系列旨在挑战和拓展开发者技能的示例代码。这些示例可能涵盖从基础概念到高级技术的各种主题，旨在帮助用户深入理解和应用JavaScript。 首先，让...
在JavaScript编程领域，PPK（Peter-Paul ...同时，这些示例也展示了良好的代码组织和可扩展性设计，使得代码易于维护和复用。在实际项目中，可以基于这些基础进行更复杂的功能实现，如自定义验证规则、多语言支持等。
描述中的信息虽然简洁，但暗示我们将看到具体的代码示例，这些示例可能展示了如何用JavaScript调用Kettle的内部组件，例如数据表（DBInfo）的读取、写入，或者数据转换（Transformation）和作业（Job）的执行。...
JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换...
"DIV新闻、图片滚动效果,上下左右方向,简洁JavaScript示例,高浏览器兼容性"是一个专注于使用JavaScript实现的DOM元素（尤其是DIV）滚动效果的教程或代码示例。这个示例旨在帮助开发者创建出具有新闻滚动、图片轮播等...
总的来说，这个离线版的ArcGIS API for JavaScript 4.11帮助文档和示例集是开发者不可或缺的参考资料。无论是新手还是经验丰富的开发者，都能从中受益，提升地图应用开发的效率和质量。通过对文档的深入学习和对示例...
本示例主要介绍如何在JavaScript中使用不同的库和方法来实现这一功能。 首先，理解WSDL是关键。WSDL是一种XML格式的规范，用于描述Web服务以及如何访问这些服务。它定义了服务的位置、可用的操作以及如何通过SOAP...