整理 jquery 操作表格 增、删、上下移动、统计、排序
<!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>