Sometimes we need to move rows of the table were on the up, down, add, delete operation, will greatly improve the efficiency of using jQuery page development. Various operations of the simplified forms. Kazakhstan temporarily no explanation.
Page html code:
<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 operation code table:
<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>
Reproduced in: https: //my.oschina.net/u/1167421/blog/546481