<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>
分享到：
相关推荐
本示例主要关注如何利用jQuery实现在HTML表格（table）中移动行（tr）的同时保持行内的序号不变，这对于数据排序或用户交互有着重要的应用。我们将探讨以下关键知识点： 1. jQuery选择器与DOM操作： jQuery提供了...
总结来说，这个知识点展示了如何利用jQuery实现表格行的上下移动，提高了用户对数据表的操作便利性。通过绑定事件处理器，我们可以轻松地实现行的动态互换，而无需刷新整个页面，从而提供了更流畅的用户体验。
本知识点主要探讨如何使用jQuery实现表格（table）中行的上下移动互换功能。这一功能常用于数据管理界面，允许用户通过交互调整数据顺序。 首先，你需要确保已经下载并引入了jQuery库。通常，可以通过在HTML文件中...
在本文中，我们将深入探讨如何使用jQuery来实现表格（table）中tr元素的上下移动功能，同时保持表内的序号不变。这个实例适用于那些需要动态调整数据顺序的Web应用程序，例如，用户可以通过点击按钮轻松地调整列表项...
本主题将详细探讨如何使用jQuery实现表格（table）中的行上移、下移和置顶功能，这对于数据排序和用户交互至关重要。 一、jQuery基础 在开始之前，确保已引入jQuery库。你可以通过以下方式在HTML文件中添加引用： ...
能够自定义tr的位置，便于排序操作,000000000
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括对表格（table）的操作。本文将深入探讨如何使用jQuery来实现表格行（tr）的添加、删除和上下移动，同时提供相关源码供参考。 一、...
本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格（table）中的光标移动，并在光标到达最后一个输入框时新增一行，确保这个功能在多个浏览器中都能正常工作。 首先，我们需要理解...
本教程将详细讲解如何利用jQuery实现表格内容的上下移动功能，以及随之变动的序号更新。 一、jQuery基础 jQuery通过提供简洁的API，使得JavaScript代码更易于编写和理解。其核心概念包括选择器（用于选取DOM元素）...
在本教程中，我们将深入探讨如何利用jQuery技术实现表格（table）元素的上下移动，以此来改变表格行（tr）的顺序，以满足用户自定义排序的需求。 首先，我们需要理解HTML表格的基本结构。一个表格由`<table>`元素...
标题 "jquery实现的可增加，删除行，可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验...
在描述中提到的"jquery排序"，可能是指使用`sort()`函数或`$.fn.sort()`方法对表格的行（tr元素）进行排序。例如，你可以根据特定列的内容进行升序或降序排列。头行（表头th元素）不参与排序，而尾行不能移到下方，...
`jquery.table.tr.js` 很可能是实现上述功能的 JavaScript 插件，它可能封装了表格行的移动和删除逻辑，以便更方便地在项目中使用。使用时，需要确保该插件被正确引入，并且调用相应的 API 来实现所需功能。 六、...
jQuery操作Table技巧大汇总主要涵盖了如何使用jQuery对HTML表格进行一系列的交互和样式修改，包括鼠标响应、样式调整、行和列的隐藏与删除，以及单元格内容的获取与设置等。以下是对这些技巧的详细解释： 1. 鼠标...
<table> <tr> <td><input type=button value=上移 onclick=moveUp(this)/> <td><input type=button value=下移 onclick=moveDown(this)/> </tr> <tr> <td><input type=button value=上移 ...
在给出的示例代码中，展示了如何利用jQuery实现表格中行（tr元素）的上下移动功能。下面将详细解读该示例代码中的关键知识点。 首先，我们要注意到示例代码中引入了jQuery库文件，这是利用jQuery进行DOM操作的前提...
本文将深入探讨如何使用jQuery来改变表格（table）中的列宽，这在构建动态用户界面时非常实用。 首先，让我们理解HTML表格的基本结构。一个表格由`<table>`元素开始，包含若干行`<tr>`（table row），每一行又包含...
在网页设计中，表格（Table）是一种常见的数据展示方式，jQuery 是一个强大的JavaScript库，它极大地简化了DOM操作、事件处理以及动画效果。当我们想要在用户鼠标悬停（mouseover）到表格某一行时，实现整行颜色变化...