LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

用JavaScript上下移动表格的行
admin
2013年11月10日 14:36 本文热度 4511
看到过很多调整表格行顺序的例子（包括自己以前做过的），基本都是每一次上下移动都要向服务器提交，在移动很多次的时候，很浪费资源，因此想用JavaScript在客户端实现对表格行顺序调整，最后才向服务器提交。

费了近一上午的时间，才做出这么一个例子：
<html>
<head>
<title>Move table row up/down test</title>
<script language="javascript">
//*********************************
// Get current row's index by name
//*********************************
function getRowIndex(strName)
{
var table = document.getElementById('targettable');
var rows = table.getElementsByTagName('tr');
arrNameIndex = new Array()
for (var i=0; i<rows.length; i++) {
if(strName == rows[i].getAttribute('id')) {
return i;
}
}
}

//*********************************
// Move row up
//*********************************
function moveRowUp(rowIndex)
{
if(rowIndex == 0) {
return;
}

var table = document.getElementById('targettable');
var rows = table.getElementsByTagName('tr');

tr = rows[rowIndex];
pos = rows[rowIndex-1];
pos.parentNode.insertBefore(tr, pos);

}

//*********************************
// Move row down
//*********************************
function moveRowDown(rowIndex)
{

var table = document.getElementById('targettable');
var rows = table.getElementsByTagName('tr');

if(rowIndex >= rows.length) {
return;
}

tr = rows[rowIndex+1];
pos = rows[rowIndex];
pos.parentNode.insertBefore(tr, pos);

}
</script
</head>
<body>
<table id="targettable">
<tr valign="top" id="row1">
<td>This is :</td>
<td>Line1</td>
<td>
<input type="button" name="moveup" onclick="moveRowUp(getRowIndex('row1'));" value="↑" />
<input type="button" name="movedown" onclick="moveRowDown(getRowIndex('row1'));" value="↓" />
</td>
</tr>
<tr valign="top" id="row2">
<td>This is :</td>
<td>Line2</td>
<td>
<input type="button" name="moveup" onclick="moveRowUp(getRowIndex('row2'));" value="↑" />
<input type="button" name="movedown" onclick="moveRowDown(getRowIndex('row2'));" value="↓" />
</td>
</tr>
<tr valign="top" id="row3">
<td>This is :</td>
<td>Line3</td>
<td>
<input type="button" name="moveup" onclick="moveRowUp(getRowIndex('row3'));" value="↑" />
<input type="button" name="movedown" onclick="moveRowDown(getRowIndex('row3'));" value="↓" />
</td>
</tr>
</table>
</body>
</html>
以上例子，在提交表单的时候处理起来有些麻烦，因此新作了一个：
<html>
<head>
<title>shift row of table sample</title>
<script language="javascript">
<!--
var MIN_ROW_ID = 0;
var MAX_ROW_ID = 5;
var MIN_COL_ID = 2;
var MAX_COL_ID = 4;
var flgOrderChanged = false;

//*********************************
// Move Up
//*********************************
function moveRowUp(rowId)
{
if(rowId <= MIN_ROW_ID) {
return;
}

var strPrefix = 'R' + rowId + 'C';
var strUpPrefix = 'R' + (rowId - 1) + 'C';
for(var colId = MIN_COL_ID; colId <= MAX_COL_ID; colId++) {
var strDivId = strPrefix + colId;
var strUpDivId = strUpPrefix + colId;

var objDiv = document.getElementById(strDivId);
var objUpDiv = document.getElementById(strUpDivId);

var tmpHTML = objDiv.innerHTML;
objDiv.innerHTML = objUpDiv.innerHTML;
objUpDiv.innerHTML = tmpHTML;
}

flgOrderChanged = true;
}

//*********************************
// Move Down
//*********************************
function moveRowDown(rowId)
{
if(rowId >= MAX_ROW_ID) {
return;
}

var strPrefix = 'R' + rowId + 'C';
var strDownPrefix = 'R' + (rowId + 1) + 'C';
for(var colId = MIN_COL_ID; colId <= MAX_COL_ID; colId++) {
var strDivId = strPrefix + colId;
var strDownDivId = strDownPrefix + colId;

var objDiv = document.getElementById(strDivId);
var objDownDiv = document.getElementById(strDownDivId);

var tmpHTML = objDiv.innerHTML;
objDiv.innerHTML = objDownDiv.innerHTML;
objDownDiv.innerHTML = tmpHTML;
}

flgOrderChanged = true;
}
-->
</script
</head>
<body>
<table border="1" width="60%" align="center" cellspacing="0"  bgcolor="">
    <tr bgcolor="#E6E6FA">
      <td  height="1" align="center" colspan="2">Order</td>
      <td  height="1" align="center" width="30%">Column1</td>
      <td  height="1" align="center" width="30%">Column2</td>
      <td  height="1" align="center">Oprations</td>
    </tr>
      <tr>
      <td  height="1" align="left">
      <div id="R0C0" align="center">
          <a href="javascript:moveRowDown(0);">Down</a>
      </div>
      </td>
      <td  height="1" align="center">
      <div id="R0C1" align="center">1</div>
      </td>
      <td  height="1" align="left">
      <div id="R0C2" align="left">Row 1 Colum 1</div>
      </td>
      <td  height="1" align="left">
      <div id="R0C3" align="left">Row 1 Colum 2</div>
      </td>
      <td  height="1" align="left">
      <div id="R0C4" align="left"><a href="#edit">Edit(1)</a></div>
      </td>
    </tr>
    <tr>
      <td  height="1" align="left">
      <div id="R1C0" align="center">
      <a href="javascript:moveRowDown(1);">Down</a>
          <a href="javascript:moveRowUp(1);">Up</a>
      </div>
      </td>
      <td  height="1" align="center">
      <div id="R1C1" align="center">2</div>
      </td>
      <td  height="1" align="left">
      <div id="R1C2" align="left">Row 2 Colum 1</div>
      </td>
      <td  height="1" align="left">
      <div id="R1C3" align="left">Row 2 Colum 2</div>
      </td>
      <td  height="1" align="left">
      <div id="R1C4" align="left"><a href="#edit">Edit(2)</a></div>
      </td>
    </tr>
    <tr>
    <tr>
      <td  height="1" align="left">
      <div id="R2C0" align="center">
      <a href="javascript:moveRowDown(2);">Down</a>
          <a href="javascript:moveRowUp(2);">Up</a>
      </div>
      </td>
      <td  height="1" align="center">
      <div id="R2C1" align="center">3</div>
      </td>
      <td  height="1" align="left">
      <div id="R2C2" align="left">Row 3 Colum 1</div>
      </td>
      <td  height="1" align="left">
      <div id="R2C3" align="left">Row 3 Colum 2</div>
      </td>
      <td  height="1" align="left">
      <div id="R2C4" align="left"><a href="#edit">Edit(3)</a></div>
      </td>
    </tr>
    <tr>
    <tr>
      <td  height="1" align="left">
      <div id="R3C0" align="center">
          <a href="javascript:moveRowUp(2);">Up</a>
      </div>
      </td>
      <td  height="1" align="center">
      <div id="R3C1" align="center">4</div>
      </td>
      <td  height="1" align="left">
      <div id="R3C2" align="left">Row 4 Colum 1</div>
      </td>
      <td  height="1" align="left">
      <div id="R3C3" align="left">Row 4 Colum 2</div>
      </td>
      <td  height="1" align="left">
      <div id="R3C4" align="left"><a href="#edit">Edit(4)</a></div>
      </td>
    </tr>
</table>
</body>
</html>
把以上代码保存成html文件，用浏览器(IE, Firefox, Opera ...)打开即可看到效果。

该文章在 2013/11/10 14:36:50 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved