使用jQuery对表格的操作,组织JSON字符串

有时候我们需要对表格的行进行上移，下移，增加，删除的操作，使用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>