有时候我们需要对表格的行进行上移，下移，增加，删除的操作，使用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()){
alert("当前为第一行，无需上移！");
return;
}
//交换上下两个td的序号
var $prev_tr = $cur_tr.prev();
var prev_index = $prev_tr.children("td").html();
var cur_index = $cur_tr.children("td").html();
//当前tr的DOM对象
var cur_tr=$cur_tr[0];
//当前tr上一个的DOM对象
var prev_tr = $prev_tr[0];
prev_tr.cells[0].innerHTML = cur_index;
cur_tr.cells[0].innerHTML = prev_index;
$cur_tr.insertBefore($cur_tr.prev());
}
function moveDown(element){
var $cur_tr = $(element).parent().parent();
var $mbgl_tb = $cur_tr.parent();
var $last_tr = $mbgl_tb.find("tr:last");
//如果当前行是最后一行，那么不允许下移
if($last_tr.html() == $cur_tr.html()){
alert("当前为最后一行，无需下移！");
return;
}
//交换上下两个td的序号
var $next_tr = $cur_tr.next();
//获取第一个td的html
var next_index = $next_tr.children("td").html();
var cur_index = $cur_tr.children("td").html();
//当前tr的DOM对象
var cur_tr=$cur_tr[0];
//当前tr上一个的DOM对象
var next_tr = $next_tr[0];
next_tr.cells[0].innerHTML = cur_index;
cur_tr.cells[0].innerHTML = next_index;
$cur_tr.insertAfter($cur_tr.next());
}
function deleteRow(element){
var $cur_tr = $(element).parent().parent();
var $mbgl_tb = $cur_tr.parent();
var startIndex = $cur_tr.get(0).rowIndex - 1;
//转成dom对象
var mbgl_tb = $mbgl_tb.get(0);
for(var i = startIndex+1 ; i < mbgl_tb.rows.length ; i ++){
var tableRow = mbgl_tb.rows[i];
tableRow.cells[0].innerHTML = (i - 2)+"";
}
$cur_tr.remove();
}
function saveDataItem(){
var $mbgl_tb = $('#mbgl_tb');
var $clone_tr = $('#hidden_tr').clone();
$clone_tr.addClass('List_tr');
$clone_tr.show();
var clone_tr = $clone_tr.get(0);
var len = $mbgl_tb.get(0).rows.length;
clone_tr.cells[0].innerHTML = len-1;
clone_tr.cells[1].innerHTML = $('#item_text').val();
clone_tr.cells[2].innerHTML = $('#show_type_select').text();
clone_tr.cells[3].innerHTML = $('#len_text').val();
clone_tr.cells[4].innerHTML = $('#unit_text').val();
alert(clone_tr.innerHTML);
$mbgl_tb.append("<tr class=List_tr>"+clone_tr.innerHTML+"</tr>");
$('#item_text').val("");
$('#show_type_select').val("");
$('#len_text').val("");
$('#unit_text').val("");
}
function saveTemplate(){
var jsonStr = "[";
var zf = '"';
$_tr = $('#mbgl_tb').find('tr');
for(var i = 2 ; i < $_tr.size() ; i++){
var _tr = $_tr.eq(i).get(0);
var cjsjx_txt = _tr.cells[1].innerHTML;
var cjnr_txt = _tr.cells[2].innerHTML;
var cd_txt = _tr.cells[3].innerHTML;
var dw_txt = _tr.cells[4].innerHTML;
jsonStr += "{"+zf+"cjsjx"+zf+":"+zf+cjsjx_txt+zf
+","+zf+"cjnr"+zf+":"+zf+cjnr_txt+zf
+","+zf+"cd"+zf+":"+zf+cd_txt+zf
+","+zf+"dw"+zf+":"+zf+dw_txt+zf+"},";
}
jsonStr = jsonStr.substring(0,jsonStr.length - 1);
jsonStr += "]";
alert(jsonStr);
}
</script>转载于:https://my.oschina.net/u/1167421/blog/546481