`
sbpya
  • 浏览: 615725 次
  • 性别: Icon_minigender_1
  • 来自: 杭州，长沙
社区版块
存档分类
最新评论

Javascript实现web表格宽度拖动(分固定宽度和不固定宽度)

WebJavaScriptJ#HTML 
阅读更多

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>
var dragenable=false;
var x;
var y;
var w;
var h;
var obj;
function init() {

x=event.clientX+document.body.scrollLeft;
obj=event.srcElement;
w=event.srcElement.offsetWidth;
obj.setCapture();
if(x>event.srcElement.offsetLeft+w-5 && x<event.srcElement.offsetLeft+w) {dragenable=true;obj.style.cursor='e-resize';}
}

function drag() {
 if(event.clientX+document.body.scrollLeft>event.srcElement.offsetLeft+event.srcElement.offsetWidth-5 && event.clientX+document.body.scrollLeft<event.srcElement.offsetLeft+event.srcElement.offsetWidth) {event.srcElement.style.cursor='e-resize';}
 else event.srcElement.style.cursor='default';
if(dragenable==true) {
 if(event.clientX+document.body.scrollLeft-x+w>0) {
 var i=obj.cellIndex;
 var j;
 for(j=0;j<obj.parentNode.parentNode.rows.length;j++) {
  obj.parentNode.parentNode.rows[j].cells[i].width=event.clientX+document.body.scrollLeft-x+w;
  }
 }
 else {
  var i=obj.cellIndex;
  var j;
  for(j=0;j<obj.parentNode.parentNode.rows.length;j++) {
   obj.parentNode.parentNode.rows[j].cells[i].width=1;
   }
  }
 }
}

function end() {
dragenable=false;
obj.releaseCapture();
obj.style.cursor='default';
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" leftmargin=0 topmargin=0>
表格宽度未设定或表格宽度白分比显示
<br>
<table width="40%" border="1" cellpadding="0" cellspacing="2" onmousedown=init() onmouseup=end() onmousemove=drag() id=table1 style="table-layout:fixed">
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
</table>

<br>
表格宽度设定了<br>
<table border="1" cellpadding="0" cellspacing="2" onmousedown=init() onmousemove=drag() onmouseup=end() id=table2 style="table-layout:fixed" width="500">
  <tr>
    <td width="100" height="18" align="top">dffdksdlkfslfkldka;lsdfksd;lkfd;</td>
    <td width="100" align="top">&nbsp;</td>
    <td width="100" align="top">&nbsp;</td>
    <td width="100" align="top">&nbsp;</td>
    <td width="100" align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="18" align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
    <td align="top">&nbsp;</td>
  </tr>
</table>


</body>
</html>

分享到：
| 利用oracle快照dblink解决数据库表同步问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    又一个很好的js控制实现动态拖动表格宽度的例子

    在JavaScript和CSS的世界里，动态地调整表格宽度是一项常见的需求，尤其在用户交互丰富的Web应用中。这个例子提供了一个高效且直观的方法，让用户能够通过鼠标拖动来改变表格的列宽，从而提升用户体验。下面我们将...

    数据表格JqGrid自适应列宽度

    本文将深入探讨“数据表格JqGrid自适应列宽度”这一主题，以帮助开发者更好地理解和实现这一功能。 首先，JqGrid允许用户根据屏幕尺寸或窗口大小自动调整列宽，以优化用户体验。这种自适应性是现代Web应用中必不可...

    javascript 拖动表格行和列

    在JavaScript编程中，拖动表格行和列的功能可以极大地提升用户交互体验，使得数据操作更加直观和便捷。本文将深入探讨如何实现这个功能，并提供一些...通过实践和调试，你可以创造出更加动态和交互丰富的Web表格应用。

    table实现列宽的拖动效果

    "table实现列宽的拖动效果"是一个常见的需求，特别是在数据展示或者数据分析的应用中，用户可能需要自定义表格列的宽度以更好地查看和理解数据。这篇博客文章 "https://jifeng3321.iteye.com/blog/2403674" 提到的...

    js表格内容拖拽效果.zip

    "js表格内容拖拽效果.zip"这个资源提供了一种创新的解决方案，它包含了10个不同的示例，展示了如何在网页表格中实现内容的拖放功能。这种功能可以让用户通过简单的鼠标操作，自由地将表格内的数据从一个单元格移动到...

    表格列宽拖动

    "表格列宽拖动"是一个常见的功能，它允许用户通过鼠标拖动来调整数据表格中列的宽度，以适应不同数据量和查看需求。这个功能在数据分析、报表展示等场景下尤其重要。在给定的【标题】"表格列宽拖动"和【描述】中，...

    Jquery table固定表头,固定列,全浏览器兼容

    下面我们将深入探讨如何使用 jQuery 和相关的 CSS 技术来创建一个具有固定表头和固定列的表格，并确保全浏览器兼容。 首先，jQuery 是一个强大的 JavaScript 库，它简化了 DOM 操作、事件处理、动画和Ajax交互。在...

    可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]

    总的来说，"可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]"是一个涉及到JavaScript事件处理、浏览器兼容性以及用户交互设计的实用技术，它提升了网页的用户体验，同时也体现了前端开发者对细节和用户...

    table拖动(固定宽度，兼容Firefox 3.5IE6)

    在web中模拟窗口表格控件，可以用鼠标拖动改变表格列宽,兼容Firefox 3.5和IE6浏览器。和之前的一个不同的是这个是固定了table的宽度。 相应函数修改为一下后可适应tabel的border属性取不同值： o.p_p_c_gw=...

    仿excel表格，固定一列可拉动

    在IT领域，尤其是在Web开发和移动应用开发中，模拟Excel表格功能是一项常见的需求。"仿excel表格，固定一列可拉动"这样的设计旨在提供类似Excel的用户体验，允许用户查看和操作大量数据，同时保持一定的灵活性。这个...

    可拖动列、可排序、可改变宽度的GridView

    3. **可改变宽度**：改变列宽的功能通常是通过JavaScript和CSS实现的。用户可以鼠标悬停在列分隔线上，然后拖动来调整列宽。前端代码需要捕获鼠标事件，计算新的宽度，并通过AJAX将这些信息发送回服务器。服务器端...

    鼠标拖动表格改变宽度，动态Ajax数据排序示例.rar

    这个"鼠标拖动表格改变宽度，动态Ajax数据排序示例.rar"压缩包提供了一个实用的JavaScript和Ajax实现，允许用户通过鼠标操作来改变表格列宽以及进行动态数据排序，极大地提升了用户体验。以下是关于这个示例中的关键...

    handsontable中文API 常规配置 web excel表格

    通过以上详细的介绍，我们可以看到Handsontable提供的配置选项非常丰富，几乎涵盖了Web表格处理的所有需求。开发者可以根据实际项目需求灵活配置这些选项，从而实现功能强大且美观的表格界面。无论是基础的数据展示...

    实现可改变列宽度的表格、还可以交换列位置、排序登功能

    总的来说，实现可改变列宽度、交换列位置和排序功能的表格是一项涉及前端开发多个方面的任务，包括DOM操作、事件处理、数据结构理解、排序算法以及优化技巧。通过不断学习和实践，开发者可以创建出更加用户友好的...

    用来实现Web页面图片移动托拽的代码段

    这段代码通过 JavaScript 实现了在 Web 页面上动态创建图像元素的功能，并允许用户通过鼠标拖动这些图像。它首先在页面加载时初始化所有图像的位置和状态，然后通过监听鼠标事件来实现图像的拖动功能。值得注意的是...

    js技术,html表格列宽自由拖动并cookie缓存

    实现列宽拖动功能，JavaScript需要监听鼠标事件，例如`mousedown`、`mousemove`和`mouseup`。当用户在表格列的边框上按下鼠标时，`mousedown`事件会被触发，然后在鼠标移动过程中，`mousemove`事件不断更新列宽，...

    固定列宽，表格默认风格，表格刷新，人性化展示等

    综合这些信息，我们可以推测这是一个关于构建具有固定列宽、默认风格、实时刷新和人性化展示功能的Web表格项目。为了实现这样的功能，开发者需要掌握HTML、CSS、JavaScript以及可能的后端语言如Java（WAR文件通常是...

    colResizable表格列宽支持拖动效果

    虽然其默认不支持直接的列宽拖动，但我们可以通过在后台生成HTML时注入必要的JavaScript代码，或者在前端使用jQuery选择器找到GridView对应的表格元素，然后调用colResizable方法来实现拖动功能。 在项目中，通常会...

    js表格列拖动排序代码

    在JavaScript编程中，实现表格列拖动排序是一种增强用户交互体验的功能。这个功能允许用户通过鼠标长按并拖动表格的列头来调整列的顺序，以满足个性化查看数据的需求。这种效果通常应用于数据管理、数据分析或者任何...

    程序天下:JavaScript实例自学手册

    9.5 表格的宽度固定后内容自动换行 9.6 表格的排序 9.7 表格的斜线 9.8 table中的文字滚动 9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 ...

Magicbox
Global site tag (gtag.js) - Google Analytics