<HTML>
<HEAD>
<TITLE>表格移动</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script language="Javascript">
var beginMoving = false;
var canMove = true;
function setMove(obj)
{
canMove = obj;
}
function MouseDownToMove (obj)
{
if(!canMove)
return false;
obj.style.zIndex = 1;
obj.mouseDownY = event.clientY;
obj.mouseDownX = event.clientX;
beginMoving = true;
obj.setCapture ();
}
function MouseMoveToMove (obj)
{
if(!beginMoving) return false;
for (i = 0; i < obj.cells.length; i ++)
obj.cells [i].style.filter = "alpha(opacity = 70)";
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;
for (i = 0; i < obj.cells.length; i ++)
obj.cells [i].style.filter = "alpha(opacity = 100)";
obj.parentElement.moveRow(obj.rowIndex, tempRowIndex);
}
</script>
<script language=javascript>
<!--//
function setButtonsOnClick(obj){
}
function selectallDisplay(obj) //全选或全不选
{
var tureorfalse=obj.checked;
var theDetail=tbdDistributions.rows;
for(var i=1;i<theDetail.length;i++)
{
if(tureorfalse)
{
theDetail[i].all("d.isDisplay").value= "Y";
}else
{
theDetail[i].all("d.isDisplay").value= "N";
}
}
}
function selectallDisplayControl(obj) //全选或全不选
{
var tureorfalse=obj.checked;
var theDetail=tbdDistributions.rows;
for(var i=1;i<theDetail.length;i++)
{
if(tureorfalse)
{
theDetail[i].all("d.isDisplayControl").value= "Y";
}else
{
theDetail[i].all("d.isDisplayControl").value= "N";
}
}
}
function selectType(obj) //选择类型
{
var theDetail=tbdDistributions.rows;
for(var i=1;i<theDetail.length;i++)
{
theDetail[i].all("d.type").value = obj.value;
}
}
//-->
</script>
</HEAD>
<BODY bgColor=#ffffff text=#000000 leftMargin=0 topMargin=10>
<form name=frm method=post action="userLayoutConfig.do">
<table width="96%" border="1" cellspacing="0" align="center" cellpadding="0">
<tbody id="tbdDistributions" onkeydown='keyDownControl(event.srcElement)'>
<tr>
<td class="listHead" width="30"> </td>
<td class="listHead" style="font-size:15pt">Field Id</td>
<td class="listHead">Is Display<br><input name="checkbox" type=checkbox onclick="selectallDisplay(this);"></td>
<td class="listHead">Is Display Control<br>
<select name="type" onchange="selectType(this);">
<option value="view">View</option>
<option value="edit">Edit</option>
</select>
</td>
</tr>
<tr id="TrID1" style='height:25;position:relative;cursor:hand' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="uilist0" align=center>1</td>
<td class="uilist0">
<input type="text" name="d.fieldId" value="source" size=16>
<input type="hidden" name="d.layoutId" value="storeQuery_1">
</td>
<td class="uilist0">
<select name="d.isDisplay" onmousedown="setMove(false);" onblur="setMove(true);">
<option value="Y" selected>Y</option>
<option value="N" >N</option>
</select>
</td>
<td class="uilist0">
<select name="d.type" onmousedown="setMove(false);" onblur="setMove(true);">
<option value="view" selected>View</option>
<option value="edit" >Edit</option>
</select>
</td>
</tr>
<tr id="TrID2" style='height:25;position:relative;cursor:hand' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="uilist0" align=center>2</td>
<td class="uilist0">
<input type="text" name="d.fieldId" value="reference" size=16>
<input type="hidden" name="d.layoutId" value="storeQuery_2">
</td>
<td class="uilist0">
<select name="d.isDisplay" onmousedown="setMove(false);" onblur="setMove(true);">
<option value="Y" selected>Y</option>
<option value="N" >N</option>
</select>
</td>
<td class="uilist0">
<select name="d.type" onmousedown="setMove(false);" onblur="setMove(true);">
<option value="view" selected>View</option>
<option value="edit" >Edit</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
</BODY></HTML>
分享到：
相关推荐
实例QT程序 —— 如何在QTableWidget表格中移动带控件的单元格列 编译可以直接运行。 运行环境WIN10 Qt5.9.7 。 资源为源码压缩包： TableWidgetMoveColumnWithCellWidget.rar 相关文章链接如下： ...
在介绍js表格换行效果（表格移动行）的知识点之前，首先需要理解的是DOM（Document Object Model，文档对象模型）的概念。DOM是一种与平台和语言无关的应用程序编程接口（API），它允许程序和脚本动态地访问和更新...
接下来，我们探讨不同类型的表格移动方法： 1. **尾随文字段**：这是默认设置，表格被视为文档中的一个自然段，会随着文字的移动而移动。你可以使用分行符（硬回车）上下移动表格，通过调整字号和行间距进行微调。...
"表格移动渐变的CSS特效"是一种巧妙地利用CSS和JavaScript技术来实现的交互式元素，它使得数据展示更加生动有趣。这种特效通常用于数据列表或者表格，使得用户在浏览时能感受到平滑的过渡和变换，增强视觉吸引力。 ...
本篇文章通过一个简单的实例，展示了如何使用JavaScript实现表格行上下移动的操作，涉及到了对页面元素节点及属性的操作技巧。 首先，我们来看一个简单的表格示例，它包含了几个表格行（`<tr>`）和单元格（`<td>`）...
鼠标移动表格行上行变色的JS脚本,鼠标移动表格行上行变色的JS脚本,
至此，我们就实现了从一个Bootstrap Table向另一个表格移动行记录的功能。用户可以通过选择源表中的行，点击“Add to Target”按钮将行添加到目标表，或者选择目标表中的行，点击“Remove from Target”按钮移除。 ...
在网页设计中，HTML表格（Table）是一种常用的数据展示方式，有时我们需要实现表格内容的上下移动功能，以满足用户交互需求或数据操作便利性。本篇文章将详细讲解三种实现HTML表格内容上下移动的方法。 方法一：...
移动表格位置可以将表格移动到文档中的任何位置。 美化表格是指对表格的外观进行美化，包括设置表格框线、背景颜色、文字格式等方面。美化表格可以使表格变得更加美观，提高信息的可读性和可理解性。 绘制斜线表头...
当用户将鼠标移动到表格的某一行时，我们可能希望动态地改变这一行的背景色，以提供更好的视觉反馈或者突出特定的信息。这个功能可以通过监听鼠标的移动事件并自定义控件的画图行为来实现。 首先，我们需要理解...
本主题将深入探讨如何使用jQuery来编辑表格，包括移动表格、删除行以及添加行的功能实现。以下是对这些知识点的详细说明： 一、jQuery基本操作 在使用jQuery编辑表格前，首先需要了解jQuery的基本操作，如选择元素...
标题 "jquery实现的可增加，删除行，可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验...
描述中的“表格移动 表格拖动 表格拖曳 jquery tablednd下载 tableDnD下载”进一步证实了这与jQuery的一个插件——jQuery tableDnD（Table Drag and Drop）有关。jQuery tableDnD是一个轻量级的解决方案，它允许用户...
本文将深入探讨如何使用jQuery来实现表格行（tr）的添加、删除和上下移动，同时提供相关源码供参考。 一、jQuery基本操作 在开始之前，我们需要确保已引入jQuery库。通常在HTML文件头部通过`<script>`标签引入...
标题中的“JS控制HTML DOM表格行上下移动”指的是在网页中使用JavaScript操作DOM（Document Object Model）元素，特别是HTML表格的行（tr）进行上下移动的功能。这种功能常见于数据管理界面，允许用户通过交互调整...
这可以通过剪切和粘贴表格来完成，将上部分的表格移动到下部分。 2. **自动分页与页面设置**： - 在“页面布局”选项卡中，你可以进行页面设置以满足特定需求。例如，选择“页边距”可以设定页面的上下左右边距，...
<title>.NET页面实现表格上下左右移动光标 <script src="js/main.js"></script> <!-- 表格内容 --> ``` 接下来，我们需要编写JavaScript代码来处理光标移动和文本选择。这里我们将创建一个名为`main.js`...
"易语言高级表格鼠标移动时改变背景色"这个主题涉及到的是如何利用易语言这一中国本土化的编程语言，来实现用户在表格上移动鼠标时动态改变单元格背景颜色的功能。易语言以其简洁的语法和丰富的库函数，使得这类交互...
本文将深入探讨如何在FLEX中实现双击事件来左右移动表格中的数据，以帮助开发者理解并应用这一功能。 首先，我们要了解FLEX中的数据网格组件（DataGrid或Spark的List或Grid）。这些组件允许我们展示结构化的数据，...
js 特效 html 特效 鼠标移动表格框 js 特效 html 特效 鼠标移动表格框