使用jQuery对表格的操作,组织JSON字符串
有时候我们需要对表格的行进行上移，下移，增加，删除的操作，使用jQuery会大大提高页面开发的效率。简化表格的各种操作。暂时不做解释哈。
??? 页面的html代码：
<table id="mbgl_tb" width="100%" border="0" cellpadding="0" cellspacing="1" nowrap style="display: none;"> <td >0</td> <td >a</td> <td >b</td> <td >c</td> <td >d</td> <td ><a href="#" onClick="modifyTr(this);">修改</a> <a href="#" onclick="if(confirm('确定要删除吗？') == true)deleteRow(this);">删除</a> <a href="#" onclick="moveUp(this);">上移</a> <a href="#" onclick="moveDown(this);">下移</a></td> </tr> <tr onClick="modifyTr(this);">修改</a> <a href="#" onclick="if(confirm('确定要删除吗？') == true)deleteRow(this);">删除</a> <a href="#" onclick="moveUp(this);">上移</a> <a href="#" onclick="moveDown(this);">下移</a></td> </tr> <tr onClick="modifyTr(this);">修改</a> <a href="#" onclick="if(confirm('确定要删除吗？') == true)deleteRow(this);">删除</a> <a href="#" onclick="moveUp(this);">上移</a> <a href="#" onclick="moveDown(this);">下移</a></td> </tr> <tr onClick="modifyTr(this);">修改</a> <a href="#" onclick="if(confirm('确定要删除吗？') == true)deleteRow(this);">删除</a> <a href="#" onclick="moveUp(this);">上移</a> <a href="#" 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的htmlvar 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>?
?