`
ganjuelovejava
  • 浏览: 94823 次
  • 性别: Icon_minigender_2
  • 来自: 湖南
社区版块
存档分类
最新评论

实现表格拖动效果html

    博客分类:
  • JS
阅读更多
<html>
<title>table拖动(兼容Firefox 3.5/IE6),固定表格宽度</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="myjs.js"></script>
<body >
<table class="bg" width="100%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable" >
<tr >
<td width="10%" class="tit" >
<span class="resizeDivClass" id="drag1"><img src="11.gif" width="3" height="18"/></span>
公司名称
</td>
<td width="42%" class="tit" >
<span class="resizeDivClass" id="drag2"><img src="11.gif" width="3" height="18"/></span>
订单客户
</td>
<td width="30%" class="tit" >
<span class="resizeDivClass" id="drag3"><img src="11.gif" width="3" height="18"/></span>
部门
</td>
<td width="8%" class="tit" >
<span class="resizeDivClass" id="drag4"><img src="11.gif" width="3" height="18"/></span>
业务员
</td>
<td width="10%" class="tit" >
交款方式
</td>
</tr>
<tr >
<td>
beyond
</td>
<td >
BEYOND
</td>
<td >
广告部
</td>
<td >
王天一
</td>
<td >
现金
</td>
</tr >
</table>
</body>
</html>
分享到:
评论

相关推荐

    table实现列宽的拖动效果

    综上所述,"table实现列宽的拖动效果"涉及到前端开发中的多个技术点,包括HTML表格、JavaScript事件处理、DOM操作、CSS样式设计、响应式布局、性能优化以及用户交互设计等。通过学习和实践这些知识,开发者可以提升...

    原生javascript实现拖拽改变table表格行高(html)

    要实现行高的动态调整,我们需要选定可以被拖动的元素,通常是表格行`&lt;tr&gt;`。 接下来,我们需要编写JavaScript代码来实现拖拽功能。这通常涉及到以下几个步骤: 1. **事件监听**:首先,我们需要监听鼠标事件,如`...

    bootstrap-table.css 表格拖拽排序

    这个JavaScript库提供了一种简单的方式来处理表格行的拖拽事件,当用户拖动表格行时,库会捕获这些事件并更新表格的DOM结构,以反映出行的新顺序。TableDnD库还提供了回调函数,可以在拖放操作开始、结束或过程中...

    基于EXT2.0.2表格间数据拖拽

    在这个特定的场景中,我们将探讨“基于EXT2.0.2表格间数据拖拽”的实现。 EXT2.0.2中的数据拖拽功能,主要是通过DragDrop(DD)和DragDropGroup(DDG)组件来实现的。DragDrop组件允许用户将元素从一个位置拖动到另...

    jquery插件colResizable实现表格列可拖拽伸缩表格大小

    本篇文章将深入探讨如何使用jQuery插件colResizable来实现表格列的拖拽伸缩功能,从而使用户可以根据需要调整表格的列宽,提高用户界面的可定制性和交互性。 colResizable是一个轻量级的jQuery插件,它为HTML表格...

    jQueryUI拖拽效果_拖拽div的值到table表格里面

    总结,实现jQuery UI拖拽效果的关键在于正确配置`draggable`和`droppable`组件,并确保HTML结构支持拖放行为。通过结合JavaScript和CSS,我们可以创建出直观且易于使用的用户界面,让用户能够方便地将div中的数据...

    easyui-表格拖动的实现

    要实现表格拖动,首先需要确保表格组件正确初始化。在 HTML 中,为每个表格添加特定的 class,例如 "easyui-datagrid",并配置相应的属性,如 `id` 和 `title`。然后在 JavaScript 中,使用 `$(selector).datagrid...

    js原生实现表格行的拖动排序

    在JavaScript原生开发中,实现表格(Table)行的拖动排序是一项常见的需求,尤其是在创建交互性强的数据展示页面时。这个功能允许用户通过鼠标拖动来改变表格中行的顺序,提升用户体验。以下是一个详细的知识点说明...

    表格列自由拖动排序js代码

    在网页开发中,实现表格列的自由拖动排序是一个增强用户体验的重要特性。这款"表格列自由拖动排序js代码"提供了这样一个功能,允许用户通过单击并长按表格的列头来自由移动列的位置,从而根据需要调整表格的布局。...

    实现自定义表格拖拽.zip

    现在,当用户拖动表格列时,`columnsOrder`数组会自动更新,同时`columns`也会随之改变,从而实现表格列的动态排序。 最后,为了让拖放效果更直观,我们可能还需要添加一些CSS样式来指示拖动状态。例如,可以为正在...

    jQuery实现表格宽度自动拖拽效果.zip

    在本资源中,我们主要关注的是使用jQuery实现表格宽度自动拖拽效果,这是一项常见的前端交互功能,使得用户可以根据需要自定义表格列宽。在HTML5的背景下,这个功能能够提升网页的用户体验,使得数据展示更为灵活和...

    Jquery 实现列的拖动 jquery grid

    本文将详细讲解如何利用jQuery实现网格(Grid)中的列拖动功能,以及如何展示和压缩内容,以达到类似Excel的效果。 首先,我们需要引入jQuery库和jQuery Grid插件的相关文件。jQuery Grid通常基于jQuery UI,因此...

    jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置

    本文将详细介绍如何使用jQuery和JavaScript技术来实现在网页上的Table表格中,通过拖动表头来任意调整列宽度的功能,这个功能适用于各种列表页面,如数据展示、报表分析等场景。 首先,我们需要引入jQuery库,它是...

    js表格内容拖拽效果.zip

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

    表格的拖拽功能

    在实现表格拖拽功能时,jQuery可以用于选择表格元素,绑定`mousedown`(鼠标按下)、`mousemove`(鼠标移动)和`mouseup`(鼠标抬起)事件,从而跟踪用户的拖动操作。 最后,`Drag.js`很可能是一个自定义的...

    实现boostrap表格td宽度可自由拖动。

    为了实现"bootstrap表格td宽度可自由拖动"的功能,我们需要借助额外的库或者自定义JavaScript代码来实现。在本场景中,我们关注的关键词是"表格td 自由拉伸",这通常意味着我们需要实现列宽的动态调整。 首先,我们...

    vue.draggable实现表格拖拽排序效果

    但以上给出的代码示例和步骤应该可以为实现表格拖拽排序效果提供一个基本的实现框架。 此外,由于文章内容是通过OCR扫描得到的,可能存在一些扫描识别上的错误。在实际应用中,建议根据实际情况,进行代码调试和...

    JS可拖动排序的表格

    JS(JavaScript)作为一种强大的客户端脚本语言,被广泛用于实现各种动态效果和用户交互,其中包括可拖动和排序的表格功能。这种功能允许用户通过鼠标拖放操作来改变表格中行或列的顺序,提升数据管理的便捷性。下面...

    JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序

    在本主题中,我们将深入探讨如何利用jQuery和JavaScript实现拖拽排序功能,适用于列表、菜单和表格等元素。 一、拖拽排序基础概念 拖拽排序是一种用户交互设计,允许用户通过鼠标拖动来改变元素的顺序。这种功能在...

    一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子

    "一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子" 提供了一个解决方案,让开发者能够轻松地为他们的网页应用添加动态且用户友好的功能。这个类库专门针对表格数据展示,允许用户通过拖动列头来...

Global site tag (gtag.js) - Google Analytics