<!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 实现冻结列、调整列宽 在这篇文章中，我们将学习如何使用 JavaScript 实现冻结列、调整列宽的功能，以便提高数据表格的可读性和交互性。 知识点 1：数据表格的基本结构 在 HTML 中，我们使用 `<TABLE>...
javascript示例代码.rarjavascript示例代码.rar
事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例...
示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript ...
用户登录 示例代码JavaScript 数据校验 用户登录 示例代码JavaScript 数据校验 用户登录 示例代码JavaScript 数据校验 用户登录 示例代码JavaScript 数据校验 用户登录 示例代码JavaScript 数据校验 用户登录 示例...
5. **函数**：函数是JavaScript中的重要组成部分，用于封装可重用的代码。你可以学习如何声明、定义和调用函数，以及理解作用域和闭包的概念。 6. **对象和数组**：JavaScript的对象是一种键值对的集合，而数组则是...
JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码...
在JavaScript编程领域，PPK（Peter-Paul ...同时，这些示例也展示了良好的代码组织和可扩展性设计，使得代码易于维护和复用。在实际项目中，可以基于这些基础进行更复杂的功能实现，如自定义验证规则、多语言支持等。
其中包含string、date、object、json的语法定义和代码示例本资源为JavaScript中复合类型的示例代码，其中包含string、date、object、json的语法定义和代码示例本资源为JavaScript中复合类型的示例代码，其中包含...
通过阅读《JavaScript权威指南》并实践书中的示例代码，开发者能够逐步掌握JavaScript的核心概念和技术，从而更好地应用于实际的Web开发项目。尽管压缩包提供了一个便捷的学习资源，但亲自动手实践才是巩固知识、...
JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 ...
JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改...
本示例主要介绍如何在JavaScript中使用不同的库和方法来实现这一功能。 首先，理解WSDL是关键。WSDL是一种XML格式的规范，用于描述Web服务以及如何访问这些服务。它定义了服务的位置、可用的操作以及如何通过SOAP...
"JavaScript王者归来示例代码（全）"这个压缩包很可能包含了丰富的JavaScript编程实例，涵盖了从基础语法到高级特性的各种应用，旨在帮助开发者深入理解和掌握JavaScript的核心概念。 在JavaScript的世界里，王者...
这个压缩包中的“权威指南代码”文件夹包含了书中的示例代码，旨在帮助读者深入理解JavaScript语法、特性以及实际应用。 1. **变量与数据类型**：JavaScript是一种动态类型的语言，它支持基本数据类型（如Number、...