日期:2014-05-16 浏览次数:20383 次
有时候我们需要对表格的行进行上移,下移,增加,删除的操作,使用jQuery会大大提高页面开发的效率。简化表格的各种操作。暂时不做解释哈。
??? 页面的html代码:
<table id="mbgl_tb" width="100%" border="0" cellpadding="0" cellspacing="1" class="List"> <tr> <td width="4%" nowrap class="List_item">序号</td> <td class="List_item">标题1</td> <td class="List_item">标题2</td> <td class="List_item">标题3</td> <td class="List_item">标题4</td> <td class="List_item">标题5</td> </tr> <tr id="hidden_tr" style="display: none;"> <td >0</td> <td >a</td> <td >b</td> <td >c</td> <td >d</td> <td ><a href="#" class="List_operatelink" onClick="modifyTr(this);">修改</a> <a href="#" class="List_operatelink" onclick="if(confirm('确定要删除吗?') == true)deleteRow(this);">删除</a> <a href="#" class="List_operatelink" onclick="moveUp(this);">上移</a> <a href="#" class="List_operatelink" onclick="moveDown(this);">下移</a></td> </tr> <tr class="List_tr"> <td >1</td> <td >1A</td> <td >1B</td> <td >1C</td> <td >1D</td> <td ><a href="#" class="List_operatelink" onClick="modifyTr(this);">修改</a> <a href="#" class="List_operatelink" onclick="if(confirm('确定要删除吗?') == true)deleteRow(this);">删除</a> <a href="#" class="List_operatelink" onclick="moveUp(this);">上移</a> <a href="#" class="List_operatelink" onclick="moveDown(this);">下移</a></td> </tr> <tr class="List_tr"> <td >2</td> <td >2A</td> <td >2B</td> <td >2C</td> <td >2D</td> <td ><a href="#" class="List_operatelink" onClick="modifyTr(this);">修改</a> <a href="#" class="List_operatelink" onclick="if(confirm('确定要删除吗?') == true)deleteRow(this);">删除</a> <a href="#" class="List_operatelink" onclick="moveUp(this);">上移</a> <a href="#" class="List_operatelink" onclick="moveDown(this);">下移</a></td> </tr> <tr class="List_tr"> <td >3</td> <td >3A</td> <td >3B</td> <td >3C</td> <td >3D</td> <td ><a href="#" class="List_operatelink" onClick="modifyTr(this);">修改</a> <a href="#" class="List_operatelink" onclick="if(confirm('确定要删除吗?') == true)deleteRow(this);">删除</a> <a href="#" class="List_operatelink" onclick="moveUp(this);">上移</a> <a href="#" class="List_operatelink" onclick="moveDown(this);">下移</a></td> </tr> </table></td> </tr> </table>
?? jQuery操作表格的代码:
?
<script type="text/javascript"> function moveUp(element){ var $cur_tr = $(element).parent().parent(); var $mbgl_tb = $cur_tr.parent(); //如果当前行是第一行,那么不允许上移 if($mbgl_tb.children(".List_tr").html() == $cur_tr.html(