您的位置：首页 > Web前端 > JQuery

一个jquery对table的操作

2014-11-04 23:35 260 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link href="common.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery-1.4.2.js"></script>

<script language="javascript" type="text/javascript" src="../js/My97DatePicker/WdatePicker.js"></script>

<style>

.depar_table td{ vertical-align:middle; text-align:center; height:25px; border-bottom:7px solid #EFEFF4; line-height:20px; z-index:100px; zoom:0;font-size:30px;color:#999;}

.depar_table tr{height:45px;}

.top{

margin:0px;

padding:10px;

height:70px;

width:100%;

background:#4C7CB1;

font-size:35px;

text-align:center;

}

.rsingle{

font-size:35px;

color:red;

}

body { font-family: arial, ans-serif;}

.submit{

background-color:#0E93F6;

border-bottom: #2d78f4;

color: white;

width: 60px;

height:40px;

}

</style>

</head>

<body>

<div class="top">

日期：<input type="text" id="mydate" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d-1',isShowClear:true,readOnly:true,dateFmt:'yyyy.MM.dd'})" style="width:20%;height:35px;">

<input type="button" value="查询" id="btn" class="submit" >

总金额：<label id="lab" class="rsingle"></label>元

</div>

<table id="tab" width="0" border="0" cellpadding="0" cellspacing="0" class="depar_table" style="background:#fff; align:center ;margin-top:0px;">

<tr >

<td style="width:12%;font-size:40px;color:#000;">序号</td>

<td style="width:35%;font-size:40px;color:#000;">名称</td>

<td style="width:20%;font-size:40px;color:#000;">日期</td>

<td id='oprice' style="width:30%;font-size:35px;color:#000;">金额</td>

</tr>

<tr>

<td style="width:8%">2</td>

<td style="width:40%">xxx</td>

<td style="width:30%">2014.11.04</td>

<td id='oprice' style="width:32%"><span class="rsingle">44</span>元</td>

</tr>

<tr>

<td style="width:8%">3</td>

<td style="width:40%">xxx</td>

<td style="width:30%">2014.07.04</td>

<td id='oprice' style="width:32%"><span class="rsingle">56</span>元</td>

</tr>

<tr>

<td style="width:8%">4</td>

<td style="width:40%">xxxx</td>

<td style="width:30%">2014.10.04</td>

<td id='oprice' style="width:32%"><span class="rsingle">160</span>元</td>

</tr>

<tr>

<td style="width:8%">4</td>

<td style="width:40%">xxx</td>

<td style="width:30%">2014.10.04</td>

<td id='oprice' style="width:32%"><span class="rsingle">160</span>元</td>

</tr>

</table>

</body>

<script>

$(function(){

getSum();

showAll();

//根据日期的条件查询来进行筛选

$("#btn").click(function(){

//显示全部列

showAll();

//获取所选的日期

var mydate=$("#mydate").val();

//获取日期列的值

var tableId= $("#tab tr");

//总价钱

var sum=0;

for (var i = 1; i < tableId.length; i++) {

//获取的第3列的值日期值

var ndat=$(tableId[i]).children("td").eq(2).text();

if(mydate==ndat){

//获取的第4列的值

var oprice=$(tableId[i]).children("td").eq(3).text();

//开始截取3列中的数字并对数字进行转型

var onum=parseFloat(oprice.substr(0,oprice.length-1));

sum+=onum;

}else{

$(tableId[i]).hide();

}

}

$("#lab").html(sum);

changeTd();

});

});

//初始化时获取总价钱

function getSum(){

var tableId= $("#tab tr");

//总钱数

var str = 0;

for(var i=1;i<tableId.length;i++)

{

//获取的第4列的值

var oprice=$(tableId[i]).children("td").eq(3).text();

//开始截取3列中的数字并对数字进行转型

var onum=parseFloat(oprice.substr(0,oprice.length-1));

str+=onum;

}

$("#lab").html(str);

}

//再次选择的时候就需要把全部table的tr值进行显示出来

function showAll(){

var tableId= $("#tab tr");

for (var i = 1; i < tableId.length; i++) {

$(tableId[i]).show();

$(tableId[i]).children("td").eq(0).text(i);

}

}

//修改序列号的列

function changeTd(){

var tableId= $("#tab tr");

var j=0;

for (var i = 1; i < tableId.length; i++) {

//获取的第4列的值

var imp=$(tableId[i]).css("display");

if(imp!="none"){

j++;

$(tableId[i]).children("td").eq(0).text(j);

}

}

}

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航