日期:2014-05-16  浏览次数:20328 次

使用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(