JavaScript实现表格列拖拽功能详解

5星 · 超过95%的资源需积分: 3 190 浏览量更新于2024-09-18 1 收藏 6KB TXT 举报

本文档主要介绍了在JavaScript中实现表格拖拽功能的方法，特别针对Internet Explorer浏览器进行了优化。以下是详细的技术要点： 1. HTML结构与元数据设置：首先，文档定义了一个简单的HTML结构，包括一个表格（`<table>`），使用`<!DOCTYPE html>`声明遵循XHTML1.0 Transitional规范。`<head>`部分包含了字符编码信息 (`charset=gb2312`) 和页面标题 (`<title>TableTest(I.E.Only)</title>`)，表明这是一个只适用于IE的表格测试脚本。 2. JavaScript函数定义： - `getCols(srcCellIndex, obj)`：这个函数接收一个源单元格索引和一个对象（可以是元素ID或DOM元素）。它用于获取指定索引的源单元格及其所在的行，并构建一个新的表格行结构，包含源单元格的值以及其余列的内容。这个函数用于创建一个新的表头行，用于展示拖拽的单元格。 - `getTable(obj)`：此函数遍历`obj`元素直到找到`<table>`标签，返回找到的表格元素，确保后续操作基于正确的表格对象进行。 - `swapCol(srcCellIndex, destCellIndex, obj)`：这是核心功能函数，接受源列索引、目标列索引和表格对象作为参数。它的作用是将指定源列的单元格内容移动到目标列。通过遍历表格中的行，它实现了单元格内容的交换。这些函数的设计旨在提供一种在IE环境下支持的简单表格拖拽功能，用户可以通过调用`getCols`和`swapCol`函数，配合事件监听（如鼠标按下、移动和释放），来实现单元格的拖拽操作，例如在表格的不同列之间复制或移动数据。请注意，由于文档的不完整性，没有提及如何实际触发这些事件和处理拖拽过程的具体代码。为了完整实现表格拖拽，还需要编写相关的事件处理器，如`onmousedown`、`onmousemove`和`onmouseup`事件，以及可能的逻辑判断和边界处理，以确保拖拽操作的正确性和流畅性。不过，文档提供的基础函数结构已经为开发者提供了实现这类功能的框架。

<!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=gb2312" />
<title>Table Test (I.E. Only)</title>

<script type="text/javascript">
/*得到表格列*/
function getCols(srcCellIndex,obj) {
obj = typeof obj === 'string' ? document.getElementById(obj) : obj;
var s = '';

s += '<tr><th style=\"font-size:12px;text-align:center;font-weight:bold;line-height: 23px;'
s += 'border: 1px solid #77ABF2;height: 25px;white-space: nowrap;background-color:#AEAEAE;">'
s += obj.rows[0].cells[srcCellIndex].innerHTML + '</th></tr>';

for(var i = 1;i < obj.rows.length;i++) {
s += '<tr><td>' + obj.rows[i].cells[srcCellIndex].innerHTML + '</td></tr>';
}
return s;
}
/*得到表格*/
function getTable(obj) {
while(obj.tagName.toLowerCase() != 'table') {
obj = obj.parentElement;
}
return obj;
}

剩余8页未读，继续阅读

gjp77930092

粉丝: 0
资源: 1

JavaScript实现表格列拖拽功能详解

表格拖动 源码 .htm javascript

实现自定义表格拖拽.zip

js拖动列.txt

js 表格拖拽排序

js table表格拖拽排序

vue antd Sortable双表格拖拽 右表格一条数据没有的时候 从左边表格拖到右表格 增加右表格拖拽高度 使其拖过来的数据放在哪都能显示在右表格怎么做

vue Sortable.js antd怎么增加表格拖拽的高度 不只是小范围拖拽

js实现excel表格拖拽排序

js 实现excel表格拖拽排序

js 原生表格拖拽排序

最新资源

表格拖动源码 .htm javascript

vue antd Sortable双表格拖拽右表格一条数据没有的时候从左边表格拖到右表格增加右表格拖拽高度使其拖过来的数据放在哪都能显示在右表格怎么做

vue Sortable.js antd怎么增加表格拖拽的高度不只是小范围拖拽