狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

用JavaScript上下移動表格的行
admin
2013年11月10日 14:36 本文熱度 4634
看到過很多調整表格行順序的例子（包括自己以前做過的），基本都是每一次上下移動都要向服務器提交，在移動很多次的時候，很浪費資源，因此想用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-2025 ClickSun All Rights Reserved