jquery 对table中tr上下移动的控制
程序员文章站
2022-05-25 22:31:39
...
<html> <head> <title>jquery表格操作</title> <script language="javascript" src="jquery.table.tr.js"></script> </head> <body> <a href="#" onclick="add_line();">添加一行</a> <a href="#" onclick="remove_line();">删除一行</a> <a href="#" onclick="up_exchange_line();">上移</a> <a href="#" onclick="down_exchange_line();">下移</a> <a href="#" onclick="top_exchange_line();">置顶</a> <a href="#" onclick="hou_exchange_line();">置底</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>删除 编辑</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>
上一篇: linux tr命令详解
下一篇: TR边框定义在IE中无法显示问题
推荐阅读
-
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
-
jquery对table中各数据的增加、保存、删除操作示例
-
jquery实现tr元素的上下移动示例代码
-
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
-
jquery 对table中tr上下移动的控制
-
jQuery实现用方向键控制层的上下左右移动_jquery
-
jquery对table中各数据的增加、保存、删除操作示例_jquery
-
jquery实现tr元素的上下移动示例代码_jquery
-
jQuery实现用方向键控制层的上下左右移动_jquery
-
jquery控制listbox中项的移动并排序的实现代码_jquery