日期:2014-05-16 浏览次数:20452 次
有时候我们需要对表格的行进行上移,下移,增加,删除的操作,使用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(