用JavaScript上下移动表格的行
当前位置：知识管理交流
→『 技术文档交流 』
看到过很多调整表格行顺序的例子（包括自己以前做过的），基本都是每一次上下移动都要向服务器提交，在移动很多次的时候，很浪费资源，因此想用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 编辑过 |
关键字查询
相关文章
正在查询... 
|
400 186 1886
