整理 jquery 操作表格增、删、上下移动、统计、排序

最新推荐文章于 2023-11-08 14:03:06 发布

iteye_7981

最新推荐文章于 2023-11-08 14:03:06 发布

阅读量181

点赞数

分类专栏： web 文章标签： jquery 操作表格 ViewUI

本文链接：https://blog.csdn.net/iteye_7981/article/details/82372555

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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>

//添加一行

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" οnclick="moveDown(this);" value="下移" /> </td>';

ap+='<td> <input type="button" οnclick="moveUp(this);" value="上移" /> </td>';

ap+='<td> <input type="button" οnclick="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>

<tr>

<td>

</td>

<td>

第二列

</td>

<td>

第三列

</td>

<td>

</td>

</tr>

</table>

</body>

</html>

iteye_7981

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
整理 jquery 操作表格增、删、上下移动、统计、排序

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt;&lt;%@taglib prefix="s" uri="/stru
复制链接

扫一扫