jquery 对table中tr上下移动的控制
<html><head><title>jquery表格操作</title><script language="javascript" src="jquery.table.tr.js"></script></head><body> <a href="#" >添加一行</a>&nbsp;&nbsp;<a href="#" >删除一行</a>&nbsp;&nbsp;<a href="#" >上移</a>&nbsp;&nbsp;<a href="#" >下移</a>&nbsp;&nbsp;<a href="#" >置顶</a>&nbsp;&nbsp;<a href="#" >置底</a><table><tr><td>序号</td><td>步骤名称</td><td>步骤描述</td><td>相关操作</td></tr></table><table id="content"></table></body></html><script language="javascript">var currentStep=0;var max_line_num=0;function add_line(){max_line_num=$("#content tr:last-child").children("td").html();if(max_line_num==null) { max_line_num=1;}else{ max_line_num=parseInt(max_line_num);max_line_num+=1;}$('#content').append("<tr id='line"+max_line_num+"' onclick='lineclick(this);'><td>"+max_line_num+"</td><td>打开网页"+max_line_num+"</td><td>打开登录网页"+max_line_num+"</td><td>删除&nbsp;&nbsp;编辑</td></tr>");}function remove_line(){ if(currentStep==0){ alert('请选择一项!');return false;}$("#content tr").each( function(){var seq=parseInt($(this).children("td").html());if(seq==currentStep) $(this).remove();if(seq>currentStep) $(this).children("td").each(function(i){if(i==0)$(this).html(seq-1);});});currentStep=0;}function top_exchange_line(){if(currentStep==0){ alert('请选择一项!');return false;}if(currentStep<=1){ alert('非法操作!'); return false;}var topStep = 1; //修改序号$('#line'+topStep+" td:first-child").html(currentStep);$('#line'+currentStep+" td:first-child").html(topStep);//取得两行的内容var topContent=$('#line'+topStep).html();var currentContent=$('#line'+currentStep).html();$('#line'+topStep).html(currentContent);//交换当前行与首行内容$('#line'+currentStep).html(topContent); $('#content tr').each(function(){$(this).css("background-color","#ffffff");});$('#line'+topStep).css("background-color","yellow"); currentStep=topStep;}function hou_exchange_line(){ if(currentStep==0){ alert('请选择一项!');return false; } if(currentStep>=max_line_num){ alert('非法操作!'); return false;}var nextStep=max_line_num;//修改序号$('#line'+nextStep+" td:first-child").html(currentStep);$('#line'+currentStep+" td:first-child").html(nextStep);//取得两行的内容var nextContent=$('#line'+nextStep).html();var currentContent=$('#line'+currentStep).html();$('#line'+nextStep).html(currentContent);//交换当前行与尾行内容$('#line'+currentStep).html(nextContent); $('#content tr').each(function(){$(this).css("background-color","#ffffff");});$('#line'+nextStep).css("background-color","yellow"); currentStep=nextStep;}function up_exchange_line(){ if(currentStep==0){ alert('请选择一项!');return false;}if(currentStep<=1){ alert('非法操作!'); return false;}var upStep=currentStep-1;//修改序号$('#line'+upStep+" td:first-child").html(currentStep);$('#line'+currentStep+" td:first-child").html(upStep);//取得两行的内容var upContent=$('#line'+upStep).html();var currentContent=$('#line'+currentStep).html();$('#line'+upStep).html(currentContent);//交换当前行与上一行内容$('#line'+currentStep).html(upContent); $('#content tr').each(function(){$(this).css("background-color","#ffffff");});$('#line'+upStep).css("background-color","yellow"); currentStep=upStep;}function down_exchange_line(){ if(currentStep==0){ alert('请选择一项!');return false; } if(currentStep>=max_line_num){ alert('非法操作!'); return false;}var nextStep=parseInt(currentStep)+1;//修改序号$('#line'+nextStep+" td:first-child").html(currentStep);$('#line'+currentStep+" td:first-child").html(nextStep);//取得两行的内容var nextContent=$('#line'+nextStep).html();var currentContent=$('#line'+currentStep).html();$('#line'+nextStep).html(currentContent);//交换当前行与上一行内容$('#line'+currentStep).html(nextContent); $('#content tr').each(function(){$(this).css("background-color","#ffffff");});$('#line'+nextStep).css("background-color","yellow"); currentStep=nextStep;}function lineclick(line){ $('#content tr').each(function(){$(this).css("background-color","#ffffff");}); var seq=$(line).children("td").html(); $(line).css("background-color","yellow"); currentStep=seq;} </script>
页:
[1]