用JavaScript上下移動(dòng)表格的行
當(dāng)前位置：點(diǎn)晴教程→知識管理交流
→『 技術(shù)文檔交流 』
看到過很多調(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)文章
正在查詢... 
|
400 186 1886
