<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>
分享到:
相关推荐
NULL 博文链接:https://shihuan830619.iteye.com/blog/1169666
jquery做的table行上下移动,互换,简单有效,非常的实用
下面小编就为大家带来一篇jQuery实现table中的tr上下移动并保持序号不变的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
基于JQuery的操作表格附源码,实现html中table的tr的添加、删除以及上下移动。
能够自定义tr的位置,便于排序操作,000000000
运用jquery技术来实现table元素的tr内容的上下移动,从而改变用户调整的顺序.研究的源代码实例共享给大家,希望能够帮助到你.
下面小编就为大家分享一篇JQuery实现table中tr上移下移的示例(超简单),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
方法一:jQuery中的hover(fun(),fun())方法,参数一:第一个方法是添加样式功能,参数二:第二个方法是取消样式功能 $(#table1 tr).hover(function(){ $(this).children(td).addClass(hover) },function(){ $(this)...
1.鼠标移动行变色 代码如下:$(‘#table1 tr’).hover(function(){ $(this).children(‘td’).addClass(‘hover’)}, function(){ $(this).children(‘td’).removeClass(‘hover’)});方法二: 代码如下:$(“#...
废话少说,我们开始进入主题。 今天我们实现的是一个列表页面上移、下移功能。如图: 当勾选列表中的列时,点击上移或者下移,会动态上移或者下移。 ... ...input type=button onclick=up();...<table width=400px ...<tr>
首先是html代码,页面上放2个listbox控件和2个按钮用于移动项目 代码如下: <table border=”0″> <tr> ”156″>全部水果:</td> ”142″> </td> ”482″>我挑选的:</td> </tr> <tr> ”2″>”Multiple” ID=”list...
不仅仅适用于例子当中的。 input,button,table,tr等都适用。 非常好用的一个插件。
首先是html代码,页面上放2个listbox控件和2个按钮用于移动项目 代码如下: <table border=”0″> <tr> ”156″>全部水果:</td> ”142″> </td> ”482″>我挑选的:</td> </tr> <tr> ”2″>”Multiple” ID=”list...
项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.相信用js很多...
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载(就绪)之前运行 jQuery...
1.2 在上移和下移以后,我们将移动以后的两行的id和datagrid-row-index属性也必须互换,这样能保证datagrid-row-index=0的行肯定是页面显示的表格的第一行,=1的是第二行等等。将来保存的时候,就是通过取这个属性值...
代码如下: <%@ page language=”java” import=”java.util.*” pageEncoding=”UTF-8″%> <... } table tr td{ border: red solid 1px; line-height:20px; } .myclass,.mystu{ display: none; } .myclas
通过下面的代码可以实现... ”center”> <fieldset xss=removed> <table cellpadding=”3″ cellspacing=”3″ border=”0″> <tr> <td> ”lblName” Text=”姓名: runat=”server”></asp> </td> <td> <asp:TextBox