欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

用JavaScript上下移動(dòng)表格的行
admin
2013年11月10日 14:36 本文熱度 4645
看到過很多調(diào)整表格行順序的例子（包括自己以前做過的），基本都是每一次上下移動(dòng)都要向服務(wù)器提交，在移動(dòng)很多次的時(shí)候，很浪費(fèi)資源，因此想用JavaScript在客戶端實(shí)現(xiàn)對表格行順序調(diào)整，最后才向服務(wù)器提交。

費(fèi)了近一上午的時(shí)間，才做出這么一個(gè)例子：
<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>
以上例子，在提交表單的時(shí)候處理起來有些麻煩，因此新作了一個(gè)：
<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 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲(chǔ)管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved