<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
</style>
<head>
<title>操作表格</title>
<script type="text/javascript" src="/mytest/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
//添加一行
function createTableRow(){
var table=$(".tab");
var id=new Date();
id+="";
var ap="<tr class='del' id='" +id+"'>";
ap+='<td> <s:textfield id="money" theme="simple" value="' +100*Math.random()+ '" ></s:textfield> </td>'
ap+='<td> <input type="button" onclick="moveDown(this);" value="下移" /> </td>';
ap+='<td> <input type="button" onclick="moveUp(this);" value="上移" /> </td>';
ap+='<td> <input type="button" onclick="deleteTableRow(this);" value="删除" /> </td>';
ap+="</tr>";
table.append(ap);
}
//删除一行
function deleteTableRow(obj){
$(obj).parents(".del").remove();
}
//上移
function moveUp(obj)
{
var current=$(obj).parent().parent();
var prev=current.prev();
if(current.index()>1) {
current.insertBefore(prev);
}
}
//下移
function moveDown(obj){
var current=$(obj).parent().parent();
var next=current.next();
if(next)
{
current.insertAfter(next);
}
}
//统计某一列值
function count(){
var table=$(".tab");
var mtd=table.find("#money");
var totle=0;
mtd.each(
function(i){
var tdV=$(this).val();
if(tdV==""){
tdV=0;
}
totle+=parseFloat(tdV);
}
);
alert(totle);
}
function sort(){
var table=$(".tab");
var td=table.find("#money"); //取得排序的所有值
var sortKey=table.find("#sortKey"); //取得排序关键字
var key=sortKey.val();
//循环比较
td.each(function(i){
var tdv1=$(this);
td.each(
function(j){
var tdv2=$(this);
var v2=tdv2.val();
var v1=tdv1.val();
if((compare(v1,v2,key))){ //符合条件则交换
tdv1.val(v2);
tdv2.val(v1);
}
}
);
}
);
key=="0"?sortKey.val("1"):sortKey.val("0")
}
//通过排序关键字比较大小
function compare(a,b,key){
if(key=="0"){
return parseFloat(a)>parseFloat(b);
}else{
return parseFloat(a)<parseFloat(b);
}
}
</script>
</head>
<body>
<table class="tab" id="tab" border="1">
<tr>
<td>
<input type="button" onclick="sort();" value="排序">
<input type="hidden" value="0" id="sortKey">
<input type="button" onclick="count();" value="统计">
</td>
<td>
第二列
</td>
<td>
第三列
</td>
<td>
<input type="button" onclick="createTableRow();" value="添加">
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
标题 "jquery实现的可增加，删除行，可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验...
项目完成后，用户可以在浏览器中看到一个带有搜索、排序功能的表格，通过jQuery实现的增删改查按钮，可以无刷新地对数据进行操作，同时Bootstrap的反馈提示和验证也能提升用户体验。 总的来说，这个项目是一个典型...
本文将深入探讨如何使用jQuery实现列表的左右上下排序，这是一项常见的前端开发任务，尤其对于动态交互的网页应用来说至关重要。 首先，我们要理解jQuery的核心理念：它提供了一套易于使用的API，使得JavaScript的...
在本教程中，我们将深入探讨如何利用jQuery技术实现表格（table）元素的上下移动，以此来改变表格行（tr）的顺序，以满足用户自定义排序的需求。 首先，我们需要理解HTML表格的基本结构。一个表格由`<table>`元素...
在给定的标题和描述中，我们涉及了几个关键的知识点：jQuery排序、表格行的上下移动、用户名验证以及使用JavaScript读取XML文档。下面将详细阐述这些技术及其应用。 首先，jQuery排序通常指的是对DOM元素进行排序，...
二、jQuery表格排序 jQuery本身并不提供直接的排序功能，但可以结合JavaScript的数组排序方法实现。首先，将表格数据转化为数组，然后对数组进行排序，最后再将排序后的数据重新渲染到表格中。可以自定义排序规则，...
<title>jQuery上下移动排序 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> .sortable { cursor: move; } <tr class="sortable">1 <tr class="sortable">2 ...
总的来说，jQuery表格列表拖动排序的实现结合了DOM操作、事件监听和数据同步等多个JavaScript核心概念。通过学习和实践此类功能，开发者不仅可以提升自身的jQuery技能，还能为用户创造出更加直观、友好的交互体验。
本文将深入探讨如何使用jQuery实现移动表格及其排序功能，这在Web开发中是一个常见且实用的需求。 首先，让我们理解"移动表格"的概念。在网页上，表格（Table）是展示数据的一种结构化方式。移动表格通常指的是用户...
本教程将详细讲解如何利用jQuery实现表格内容的上下移动功能，以及随之变动的序号更新。 一、jQuery基础 jQuery通过提供简洁的API，使得JavaScript代码更易于编写和理解。其核心概念包括选择器（用于选取DOM元素）...
在当今的网页设计与开发中，经常需要处理HTML表格中的行操作，比如行的排序、移动等。为了实现这样的功能，通常会使用JavaScript来直接操作DOM（文档对象模型）。本篇文章通过一个简单的实例，展示了如何使用...
标题提到的“jquery做的table行上下移动，互换”是jQuery实现的一种常见功能，通常用于数据表的排序和编辑。这个功能允许用户通过点击按钮或者直接拖拽来改变表格行的顺序，提高交互性和用户体验。 首先，我们需要...
6. **兼容性**：优秀的jQuery表格排序插件应支持各种现代浏览器，并考虑到移动设备的适配，确保跨平台的兼容性。 常见的jQuery表格排序插件有DataTables、TableSorter、Flexigrid等。例如，DataTables不仅提供了...
本教程将详细讲解如何利用jQuery实现表格中的自定义拖动排序功能，即“jQuery表格自定义拖到列表排序代码”。 首先，理解基本概念： 1. **jQuery库**：jQuery是由John Resig于2006年创建的，它通过提供简洁易用的...
本示例主要关注如何利用jQuery实现在HTML表格（table）中移动行（tr）的同时保持行内的序号不变，这对于数据排序或用户交互有着重要的应用。我们将探讨以下关键知识点： 1. jQuery选择器与DOM操作： jQuery提供了...
`jQuery.fancyTable`通过简单的API调用，即可将静态HTML表格转化为具有分页、排序和搜索功能的动态表格，极大地提高了用户体验。开发者无需复杂的后端处理，就能实现在前端对表格数据的操作，降低了开发难度。 ### ...
标题中的“JS控制HTML DOM表格行上下移动”指的是在网页中使用JavaScript操作DOM（Document Object Model）元素，特别是HTML表格的行（tr）进行上下移动的功能。这种功能常见于数据管理界面，允许用户通过交互调整...
mmGrid是一款基于jQuery的表格插件，提供了丰富的功能，如数据排序、分页、过滤等，用于构建动态的数据展示界面。而Bootstrap则是Twitter开源的一个用于前端开发的框架，包含了CSS样式和JavaScript组件，能够快速...
总的来说，这个jQuery实现的表格拖动排序特效源码提供了一种高效且易于实现的解决方案，使得开发者可以轻松为表格列表添加互动性，提升用户在网页上的操作体验。通过对源码的深入理解和适当定制，我们可以将其应用于...
在这个“jquery动态增加修改删除表格,上移下移功能”的项目中，开发者利用jQuery实现了对表格的动态操作，这在网页数据展示和管理中非常常见。 首先，我们来理解这个项目的标题：“jquery动态增加修改删除表格,上移...