下载文档原格式
用JSP实现拖拽上传文件和文件夹JSP（JavaServer Pages）是一种动态网页技术，允许将Java代码嵌入到HTML页面中。
拖拽上传文件和文件夹是一种常见的网页交互功能，可以使用JSP来实现。
在实现拖拽上传文件和文件夹功能之前，首先需要了解一下拖拽上传的基本原理。
在HTML中，可以通过Drag and Drop API来获取拖拽的文件和文件夹。
然后，可以使用JavaScript将拖拽的文件和文件夹发送到服务器端，服务器端可以使用JSP来处理这些文件和文件夹。
以下是一个基本的实现拖拽上传文件的JSP页面的示例：```htmlpageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>拖拽上传文件</title><script>function handleDrop(event)event.preventDefault(; // 禁止浏览器打开文件var files = event.dataTransfer.files;//遍历上传的文件for (var i = 0; i < files.length; i++)var file = files[i];// 创建FormData对象，用于发送文件到服务器var formData = new FormData(;formData.append("file", file);// 创建一个XMLHttpRequest对象，发送文件到服务器var xhr = new XMLHttpRequest(;xhr.open("POST", "upload.jsp", true);xhr.onreadystatechange = functioif (xhr.readyState == 4 && xhr.status == 200)//上传成功console.log(xhr.responseText);}};xhr.send(formData);}}</script></head><body ondragover="event.preventDefault(;"ondrop="handleDrop(event);"><h1>拖拽上传文件</h1><p>将文件拖拽到此处上传</p></body></html>```当文件被拖拽到页面的时候，`handleDrop(`函数会被调用。
JS组件BootstrapTable表格⾏拖拽效果实现代码⼀、业务需求及实现效果项⽬涉及到订单模块，那天突然接到⼀个需求，说是两种不同状态的订单之间要实现插单的效果，页⾯上呈现⽅式是：左右两个Table，左边Table⾥⾯是状态为1的订单，右边Table⾥⾯是状态为2订单，左边Table⾥⾯的⾏数据拖动到右边Table⾥⾯指定⾏的位置，拖动完成后，左边表格减少⼀⾏，右边表格增加⼀⾏。
除此之外，还需要撤销操作(相当于Ctrl + Z操作)，能够返回到上⼀步的状态。
可能描述会让⼤家模拟两可，反正已经实现了，先来看看效果图吧。
1、先看看拖动之前的效果2、这是拖动左边表格⾏数据的效果3、拖动⼀⾏完成之后表格数据的效果4、第⼆次、第三次拖动完成后效果5、右边表格上⾯撤销操作点击效果6、多次点击撤销，表格回到初始状态⼆、代码⽰例接到需求的第⼀感觉是应该上Bootstrap table api⾥⾯找⼀下，毕竟开源的⼒量是强⼤的，或许有相关的⽰例呢。
经过⼀番查找，很可惜，Bootstrap Table没有这种两张表格之间的操作。
想想其实也可以理解，Bootstrap Table是针对某个动态表格数据绑定的，它的侧重点是表格内部的功能，⽐如表格内部⾏的拖拽排序(Reorder Rows)有很好的解决⽅案，对于像博主这样的特殊需求，似乎也应该⾃⼰去实现。
1、需求分析既然决定⾃⼰去写，开始分析需求，似乎这个操作⾥⾯⽐较困难的是拖拽效果，说到拖拽效果，原来使⽤JsPlumb的时候那使⽤太多了，于是就想到了我们神奇的JQuery UI⾥⾯的draggable.js 和droppable.js。
拖拽的问题解决了，那么还有⼀个难点，就是撤销操作怎么办？我们知道Ctrl+z的意思是还原，什么叫还原？就是返回到上⼀步的操作，那么前提是要能够保存上⼀步的状态，说到保存某⼀步的状态，博主就知道怎么做了，需要⼀个全局变量Json，⾥⾯要有三个键值对，分别是当前步骤的索引、左边表格的数据、右边表格的数据。
SortableJS 是一个现代化的、轻量级的库，用于使任何HTML表格元素可排序。
它允许用户通过拖放来动态地重新排列表格行，同时提供了多种可自定义的选项和回调函数，使得对表格的排序行为能够完全按照开发者的意愿来进行。
在Vue.js框架中，我们通常使用element-ui来构建用户界面。
Element UI 中的 el-table 是一个非常常用的组件，它提供了丰富的可配置选项和强大的功能，用于展示和操作表格数据。
结合SortableJS 和 el-table 的使用，可以让我们在Vue.js项目中轻松实现表格的拖拽排序功能。
接下来，我们将详细介绍如何在Vue.js项目中使用SortableJS 和 el-table 来实现表格的拖拽排序，以及一些注意事项。
一、安装SortableJS和element-ui在使用之前，我们首先需要安装SortableJS 和element-ui 这两个库。
在Vue.js项目中，我们可以通过npm或yarn来进行安装。
1. 安装SortableJS在命令行中运行以下命令来安装SortableJS：```bashnpm install sortablejs```2. 安装element-ui在命令行中运行以下命令来安装element-ui：```bashnpm install element-ui```安装完成之后，我们就可以开始在Vue.js项目中使用这两个库了。
二、在Vue.js项目中使用SortableJS在Vue.js项目中使用SortableJS，我们首先需要引入它，并在需要进行排序的表格上添加相应的指令和事件处理函数。
1. 引入SortableJS在需要使用SortableJS的组件中，首先需要引入SortableJS：```javascriptimport Sortable from 'sortablejs';```2. 编写排序方法在组件的生命周期钩子函数中，我们可以编写一个方法，用来初始化SortableJS，并设置相关的选项和回调函数：```javascriptexport default {mounted() {this.initSortable();},methods: {initSortable() {new Sortable(this.$refs.sortableTable, {animation: 150,onEnd: (evt) => {// 拖拽结束后的操作// evt.oldIndex 表示拖动前的位置// evt.newIndex 表示拖动后的位置// 可以在这里处理数据的更新}});}}}```在这个例子中，我们在组件的 mounted 钩子函数中调用了initSortable 方法，用来初始化SortableJS。
el-table实现拖拽列方法
摘要：
1.介绍el-table 组件
2.拖拽列功能在el-table 中的实现
3.实现拖拽列的方法
a.使用原生JavaScript 实现
b.使用第三方库实现
4.总结
正文：
el-table 是Element UI 中的一个表格组件，提供了丰富的功能，如排序、筛选、复选框等。
在实际使用过程中，有时需要实现拖拽列的功能，以便用户可以自由调整表格的列顺序。
本篇文章将介绍如何实现el-table 的拖拽列功能。
要实现拖拽列的功能，可以通过以下两种方法：
1.使用原生JavaScript 实现
首先，需要在表格的每个单元格中添加点击事件监听器。
当用户点击单元格时，可以通过判断鼠标的位置来判断用户是否要拖拽列。
接着，需要计算列的位置，以便在拖拽过程中实时更新列的显示顺序。
最后，将计算得到的列位置信息发送给服务器，更新数据库中的列顺序。
2.使用第三方库实现
市面上有很多现成的拖拽库，如jQuery UI、Draggable.js 等。
这些库提
供了丰富的拖拽功能，只需简单地配置即可实现拖拽列的功能。
首先，引入第三方库，然后为表格的每个列添加拖拽事件监听器。
当用户拖拽列时，触发拖拽事件，根据事件信息计算列的新位置，并发送给服务器更新数据库。
总之，实现el-table 的拖拽列功能需要对表格结构有一定的了解，并通过监听用户操作来实时更新列的位置。
使用原生JavaScript 实现较为复杂，需要处理多种情况；而使用第三方库实现则更加简单便捷。
首先，定义一个js：tableSort.js:function sort(tableId, sortColumn,nodeType) {var table = document.getElementById("theTable");var tableBody = table.tBodies[0];var tableRows = tableBody.rows;var rowArray = new Array();for (var i = 0; i < tableRows.length; i++) {rowArray[i] = tableRows[i];}if (table.sortColumn == sortColumn) {rowArray.reverse();} else {rowArray.sort(generateCompareTR(sortColumn, nodeType));}var tbodyFragment = document.createDocumentFragment();for (var i = 0; i < rowArray.length; i++) {tbodyFragment.appendChild(rowArray[i]);}tableBody.appendChild(tbodyFragment);table.sortColumn = sortColumn;}function generateCompareTR(sortColumn, nodeType) {return function compareTR(trLeft, trRight) {var leftValue = convert(trLeft.cells[sortColumn].firstChild.nodeValue, nodeType);var rightValue = convert(trRight.cells[sortColumn].firstChild.nodeValue, nodeType); if (leftValue < rightValue) { return -1; } else {if (leftValue > rightValue) { return 1;} else {return 0;}}};}function convert(value, dataType) { switch (dataType) { case "int": return parseInt(value); case "float": return parseFloat(value); case "date": return new Date(Date.parse(value)); default: return value.toString(); }}然后是使用：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>My JSP 'tabel.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript" src="userjs/tableSort.js"></script></head><body><table id="theTable" align="center" border="1"><tr><td>标题1</td><td onclick="sort(theTable,1,'int')"> 标题2</td><td onclick="sort(theTable,2,'int')"> 标题3</td><td onclick="sort(theTable,3,'int')"> 标题4</td><td onclick="sort(theTable,4,'int')"> 标题5</td><td onclick="sort(theTable,5,'int')"> 标题6</td><td onclick="sort(theTable,6,'int')"> 标题7</td></tr></thead><tbody><tr><td></td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr><tr><td>2</td><td>3</td>5</td><td>6</td><td>7</td><td>1</td> </tr><tr><td>3</td><td>4</td><td>5</td><td>6<td>1</td><td>2</td> </tr><tr><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td></td> </tr><tr><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><tr><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr></tbody></table></body></html>之后就可以看到效果了。
js拖拽方法一、拖拽方法概述在JavaScript中，拖拽功能是用户与网页交互的一种常见方式。
通过拖拽，用户可以轻松地完成元素的重排、移动、缩放等操作。
本文将介绍JavaScript拖拽方法的分类及具体实现步骤，并给出两个实用的第三方库拖拽实例。
二、JavaScript拖拽方法分类1.原生拖拽原生拖拽是指使用JavaScript原生实现拖拽功能。
它通过监听鼠标事件（mousedown、mousemove、mouseup）来实现元素的拖拽。
2.第三方库拖拽第三方库拖拽是指使用一些成熟的库（如Dragula、Sortable.js等）来实现拖拽功能。
这些库封装了拖拽的细节，使用起来简单便捷，且具有丰富的功能和良好的可扩展性。
三、原生拖拽实现步骤1.获取元素首先，需要获取需要拖拽的元素。
可以使用getElementById、getElementsByClassName等方法获取。
2.添加事件监听器在获取到元素后，为元素添加mousedown、mousemove、mouseup 事件监听器。
3.实现拖拽功能在mousemove事件中，根据鼠标的移动方向和速度，计算元素的新位置，并更新元素样式。
4.释放事件监听器在mouseup事件中，释放mousedown事件监听器。
四、第三方库拖拽实例1.使用Dragula实现拖拽Dragula是一个轻量级的拖拽库，支持原生拖拽和惯性拖拽。
首先，引入Dragula库，然后为需要拖拽的元素添加dragula事件监听器。
具体使用方法可参考Dragula官方文档。
2.使用Sortable.js实现拖拽Sortable.js是一个基于HTML的拖拽库，支持拖拽列表、网格等多种布局。
首先，引入Sortable.js库，然后根据需求配置相关选项。
具体使用方法可参考Sortable.js官方文档。
五、拖拽应用场景拖拽功能广泛应用于网页设计中，如组件拖拽、文件上传、图片排序等。
通过使用拖拽功能，可以提高用户体验，使界面更加灵活。
在web开发中，经常会遇到需要实现数字滚动和表格滚动的需求。
而实现这些功能，往往需要借助于js库来简化开发流程并提高功能的可定制性和性能。
以下是一些常见的实现数字滚动和表格滚动的方法和相关js库。
数字滚动的实现方法：1. 手写js代码实现数字滚动：可以通过使用setInterval()函数和DOM操作来实现数字的滚动效果。
这种方法比较简单，但是需要处理很多细节和兼容性问题。
2. 使用现成的js库实现数字滚动：有一些js库专门用于实现数字滚动效果，比如CountUp.js和Odometer.js。
这些库提供了丰富的配置选项和动画效果，可以方便地实现数字的滚动和动画效果。
表格滚动的实现方法：1. 使用原生的CSS和JavaScript来实现表格的滚动效果：通过设置表格的样式和添加事件监听来实现表格的横向和纵向滚动效果。
这种方法比较灵活，但是需要处理兼容性和性能问题。
2. 使用现成的表格滚动js库：有一些专门用于实现表格滚动效果的js 库，比如DataTable.js和FixedDataTable.js。
这些库提供了丰富的功能和选项，可以方便地实现表格的滚动效果，并且通常会提供一些额外的功能，比如排序、筛选和分页等。
总结回顾在实现数字滚动和表格滚动的过程中，使用js库可以大大简化开发流程并提高功能的可定制性和性能。
对于数字滚动，CountUp.js和Odometer.js是两个比较不错的选择，它们提供了丰富的配置选项和动画效果；对于表格滚动，DataTable.js和FixedDataTable.js是两个比较流行的js库，它们提供了丰富的功能和选项，并且通常会提供一些额外的功能，比如排序、筛选和分页等。
个人观点和理解在实际开发中，我们经常需要实现数字滚动和表格滚动的功能，而使用现成的js库可以大大简化开发流程并提高功能的可定制性和性能。
在选择js库时，需要根据具体的需求和功能要求来进行选择，同时也需要考虑js库的兼容性、性能和维护性等方面的因素。
------如图显示页面：要求：点击“添加明细”按钮，页面中自动生成如下图显示的动态行和列实现上述功能的实例代码：【body里的table代码】.<table width="100%"border="0"cellspacing="1"id="tt"bgcolor="#ffffff"> .<tr class="firstpage1">.<td colspan="16"align="left">.</tr>.<tr class="firstpage">.<td height="23"width="5%">序号</td>.<td width="5%">交通工具</td>.<td width="5%">出发地点</td>.<td width="5%">抵达地点</td>.<td width="5%">.<a href="javascript:void(0)"onclick="addNew()">添加明细</a> .</td>.</tr>.</table>实现上述功能的实例代码：【body里的js代码】.<script type="text/javascript">.<!--.var i=0;.var arr=new Array('#cc99ff','#cc99ff');.alert(arr);.var count =1;.function addNew().{..var order_id =2014;.i++;.tr=document.all.tt.insertRow();.tr.style.backgroundColor=arr[i%2];.tr.insertCell().innerHTML='<div align=center>'+order_id+'</div>';.tr.insertCell().innerHTML='<div align=center>'+order_id+'</div>';.tr.insertCell().innerHTML='<div align=center><input style=\"width:80px;height:20px;border:none\" class=inputstyle type=text maxlength=20 size=8 name=START_SITUS class=border_index></div>';.tr.insertCell().innerHTML='<div align=center><input style=\"width:80px;height:20px;border:none\" class=inputstyle type=text maxlength=20 size=8 name=ARRIVE_SITUS class=border_index></div>';.tr.insertCell().innerHTML="<a href=javascript:void(0) class=\"shenpi2\"onclick=del('"+"tt"+count+"')>删除</a>";.count++;.}..//删除明细行....function del(aa){.document.all.tt.deleteRow(window.event.srcElement.parentElement.parentElement.rowIn dex);..}.//-->.</script>。
javascript实现Table行和列的拖动Table表格拖动，既可以拖动行，也可以拖动列。
代码如下：Html代码1.<html>2.<head>3.<style>4..resizeDivClass5.{6.position:relative;7.width:4;8.z-index:1;9.left:expression(this.parentElement.offsetWidth - 3);10.cursor:e-resize;11.12.}13.14..resizeDivClass215.{16.position:relative;17.18.width:expression(this.parentElement.offsetWidth);19.height:1px;20.border: solid 0px;21.22.z-index:1;23.top:expression(this.parentElement.offsetHeight - 5);24.cursor:n-resize;25.}26.</style>27.28.<script language=javascript>29.30.function MouseDownToResize(obj)31.{32.obj.mouseDownX=event.clientX;33.obj obj.pareneTdW=obj.parentElement.offsetWidth;34.obj.pareneTableW=theObjTable.offsetWidth;35.obj.setCapture();36.}37.38.function MouseMoveToResize(obj)39.{40.if(!obj.mouseDownX)41.{42.return false;43.}44.var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;45.if(newWidth>0)46.{47.obj.parentElement.style.width = newWidth;48.theObjTable.style.width=obj.pareneT ableW*1+event.cl ientX*1-obj.mouseDownX;49.}50.}51.function MouseUpToResize(obj)52.{53.obj.releaseCapture();54.obj.mouseDownX=0;55.}56.57.function MouseDownToResize2(obj)58.{59.obj.mouseDownY = event.clientY;60.obj.pareneTrH = obj.parentElement.offsetHeight;61.obj.pareneTableH=theObjTable.offsetHeight;62.obj.setCapture();63.}64.65.function MouseMoveToResize2(obj)66.{67.if(!obj.mouseDownY)68.{69.return false;70.}71.var newWidth = obj.pareneTrH * 1 + event.clientY * 1 - obj.mouseDownY;72.73.if(newWidth > 0)74.{75.obj.parentElement.style.height = newWidth;76.theObjTable.style.height = obj.pareneTableH * 1 + eve nt.clientY * 1 - obj.mouseDownY;77.}78.}79.80.function MouseUpToResize2(obj)81.{82.obj.releaseCapture();83.obj.mouseDownY=0;84.}85.86.</script>87.</head>88.89.<body>90.91.改变table的列宽度92.<table id=theObjT able STYLE=""border="1">93.<tr bgcolor=cccccc>94.<td valign=top>95.<div class="resizeDivClass"onMouseDown="MouseD ownToResize(this);"onMouseMove="MouseMoveToResize(this); "onMouseUp="MouseUpT oResize(this);"></div>96.aaa97.</td>98.<td valign=top>99.<div class="resizeDivClass"onMouseDown="MouseD ownToResize(this);"onMouseMove="MouseMoveToResize(this); "onMouseUp="MouseUpT oResize(this);"></div>ddd 100.</td>101.<td valign=top>102.<div class="resizeDivClass"onMouseDown="MouseD ownToResize(this);"onMouseMove="MouseMoveToResize(this); "onMouseUp="MouseUpT oResize(this);"></div>ddd 103.</td>104.</tr>105.106.<tr>107.<td valign=top>108.<div class="resizeDivClass2"onMouseDown="Mouse DownToResize2(this);"onMouseMove="MouseMoveT oResize2(t his);"onMouseUp="MouseUpT oResize2(this);"></div> 109.快乐不是因为拥有的多，而是计较的少。
jsp实现可编辑表格篇一：jsp+js实现可排序表格首先，定义一个js：tableSort.js:function sort(tableId, sortColumn,nodeT ype) {var table = document.getElementById(theT able);var tableBody = table.tBodies[0];var tableRows = tableBody.rows;var rowArray = new Array();for (var i = 0; i < tableRows.length; i++) {rowArray[i] = tableRows[i];}if (table.sortColumn == sortColumn) {rowArray.reverse();} else {rowArray.sort(generateCompareTR(sortColumn, nodeType));}var tbodyFragment = document.createDocumentFragment();for (var i = 0; i < rowArray.length; i++) {tbodyFragment.appendChild(rowArray[i]);}tableBody.appendChild(tbodyFragment);table.sortColumn = sortColumn;}function generateCompareTR(sortColumn, nodeType) { return function compareTR(trLeft, trRight) {var leftValue = convert(trLeft.cells[sortColumn].firstChild.nodeValue, nodeType);var rightValue = convert(trRight.cells[sortColumn].firstChild.nodeValue, nodeType);if (leftValue < rightValue) {return -1;} else {if (leftValue rightValue) {return 1;} else {return 0;}}};}function convert(value, dataType) {switch (dataType) {case int:return parseInt(value);case float:return parseFloat(value);case date:return new Date(Date.parse(value));default:return value.toString();}}然后是使用：<%@ page language=java import=java.util.* pageEncoding=UTF-8%<%String path = request.getContextPath();String basePath = request.getScheme() + ://+ request.getServerName() + : + request.getServerPort() + path + /;%<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN<html<head<base href=<%=basePath%<titleMy JSP 'tabel.jsp' starting page</title<meta http-equiv=pragma content=no-cache<meta http-equiv=cache-control content=no-cache<meta http-equiv=expires content=0<meta http-equiv=keywords content=keyword1,keyword2,keyword3 <meta http-equiv=description content=This is my page<!--<link rel=stylesheet type=text/css href=styles.css--<script type=text/javascript src=userjs/tableSort.js</script </head<body<table id=theT able align=center border=1<tr<td标题1</td<td onclick=sort(theT able,1,'int')标题2</td<td onclick=sort(theT able,2,'int')标题3</td<td onclick=sort(theT able,3,'int')标题4</td(转载于: 小龙文档网:jsp实现可编辑表格) <td onclick=sort(theT able,4,'int')标题5 </td<td onclick=sort(theT able,5,'int')标题6</td<td onclick=sort(theT able,6,'int')标题7</td</tr</thead<tbody<tr<td</td <td2</td <td3</td <td4</td <td5</td <td6</td <td7</td </tr <tr <td2</td <td3</td篇二：JQuery可编辑表格小结JQuery可编辑表格小结2010/11/23页面说明：JQuery源代码：jquery.js；CSS样式：style.css；可编辑表格的JS：table.js；jsp页面:index.jsp Jsp页面代码如下：<%@ page language=java import=java.util.* pageEncoding=utf-8% <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN <html<head<titleJQuery + Demo</title<link rel=stylesheet type=text/css href=style.css /<script type=text/javascript src=jquery.js</script<script type=text/javascript src=table.js</script</head<body<br/<br/<table<thead <tr <th colspan=2可编辑表格</th </tr </thead <tbody<tr<th编号</th <th 姓名</th </tr <tr <td00001</td <td张山</td </tr <tr<td00002</td <td李四</td </tr <tr<td00003</td <td王五</td </tr <tr<td赵六</td </tr </tbody</table</body</htmlCSS样式源代码：TABLE {}TABLE TD {}TABLE TH{}TBODY TH{}可编辑表格JS源代码：/***首先通过js来解决内容部分奇偶行的背景色不同*页面启动时加载：* $(document).ready(function(){});*///简便写法$(function(){//找到表格内容区域的所有奇数行//使用even是为了通过tbody tr 返回所有的tr元素，//在数组下标是偶数的元素返回，因为这些元素，//实际上才是我们期望的tbody里面的奇数行$('tbody tr:even').css('background-color','#ECE9D8'); //首先找到所有的编号单元格//$('tbodytd:even').css('background-color','red'); var aryTd = $('tbody td:even'); //给这些单元格注册鼠标点击事件background-color: blue; border: 1px solid black; width: 50% border: 1px solid black; cursor: hand; width: 50% border: 1px solid black; /**修正边框不能合并*/ border-collapse: collapse; width: 400px;function() {/*一般写法//找到当前鼠标点击的Td,this，就是对应相应click的td var tdObj = $(this); //创建一个文本框（创建一个节点）var inputObj = $('<input type=text /'); //去掉文本框的边框inputObj.css('border-width', '0'); //设置文本框中文字的大小inputObj.css('font-size','15px'); //是文本框的宽度和td的宽度相同inputObj.width(tdObj.width()); //设置文本框的背景色inputObj.css('background-color',tdObj.css('background-color')); //插入之前需要将当前td中的内容放置到文本框inputObj.val(tdObj.html()); //清空td中的内容tdObj.html(''); //插入一个文本框到td中inputObj.appendT o(tdObj); */ /*精简写法*/ //找到当前鼠标点击的Td,this，就是对应相应click的td var tdObj = $(this); /**虽然点击input不会错，但单击td还是会出差bug * 解决方法：判断td中是否有input*/ if(tdObj.children('input').length 0) { } //td中的文本内容：var text = tdObj.html(); //清空td中的内容tdObj.html(''); /** * 1、创建一个文本框（创建一个节点）* 2、去掉文本框的边框* 3、设置文本框中文字的大小* 4、文本框的宽度和td的宽度相同* 5、设置文本框的背景色* 6、插入之前需要将当前td中的内容放置到文本框* 7、插入一个文本框到td中return false;var inputObj = $('<input type=text /') .css('border-width', '0') .css('font-size',tdObj.css('font-size')) .width(tdObj.width()) .css('background-c olor',tdObj.css('background-color')) .val(text) .append T o(tdObj); //使文本框选中get(0)实际的DOM 元素,但此时在苹果浏览器中不能选中//inputObj.get(0).select(); /**原因：先获得焦点，后选中* 解决方法：用JQuery的返回值:事件处理*/ inputObj.trigger('focus').trigger('select 9;); //再次点击文本框，会有bug，是因为文本框属于TD,因此屏蔽文本框的click事件inputObj.click(); //处理文本框上回车和esc按键的操作inputObj.keyup( ); //处理文本框失去焦点inputObj.blur( function(event) { } //获得键值var keyCode = event.which; //处理回车if(13 == keyCode) { } //处理esc的情况if(27 == keyCode) {} //将td中的内容还原tdObj.html(text); //获取当前文本框中的内容var inputT ext = $(this).val(); tdObj.html(inputT ext); function() {} //返回false,停止传播return false;); } ); function() { } //获取当前文本框中的内容var inputT ext = $(this).val(); tdObj.html(inputT ext); //清除td下的文本框tdObj.remove('input');});小结：1．table中可以包含thead和tbody2．表头的内容放置在th中3．table{}这种写法称为标签选择器，可以对整个页面所有table产生影响。
<script language="javascript">
var beginMoving=false;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
}
function MouseMoveToMove(obj){
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
var tempTop=event.clientY-obj.mouseDownY;
var tempRowIndex=(tempTop-tempTop%25)/25;
if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;
else tempRowIndex=tempRowIndex+obj.rowIndex;
if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex =
obj.parentElement.rows.length-1;
obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
}
</script>
<TABLE WIDTH="300" BORDER="1" >
<TR style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>表1</TD></TR>
<TR style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>表2</TD></TR>
<TR style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>表3</TD></TR>
<TR style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>表4</TD></TR>
<TR style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>表5</TD></TR>
<TR style='height:25;position:relative;' onmousedown='MouseDownToMove(this)'
onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>表6</TD></TR>
<TR style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>表7</TD></TR>
<TR style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>表8</TD></TR>
</TABLE>。
