<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jscript/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#title span").each(function() {
$(this).bind("click", { id: this.id }, hide);
});
})
function tdShowOrHide(begin, end,isDo) {
var idList = new Array();
$("tr").each(function(j) {
idList.length = 0;
var beginNum = Number(begin)+1;
for (var i = beginNum; i <= end; i++) {
var id = "r" + j + "d" + i;
idList.push(id);
}
$(this).children().each(function(q) {
for (var i = 0; i <= idList.length; i++) {
if (this.id == idList[i]) {
if (isDo) {
$(this).hide();
}
else {
$(this).show();
}
}
}
});
})
}
function hide(str) {
var id = str.data.id
var idList = id.split('_');
tdShowOrHide(idList[1], idList[2],true);
$("#" + id).unbind("click").bind("click", { id: id }, show).html("+");
isDo = false;
}
function show(str) {
var id = str.data.id
var idList = id.split('_');
tdShowOrHide(idList[1], idList[2],false);
$("#" + id).unbind("click").bind("click", { id: id }, hide).html("-");
isDo = true;
}
</script>
</head>
<body>
<table style="border :1px solid black;">
<tr id="title">
<td id="r0d0">
</td>
<td id="r0d1" style=" background-color:red;">
<span id="d_1_3">-</span>
</td>
<td id="r0d2">
</td>
<td id="r0d3">
</td>
<td id="r0d4" style=" background-color:red;">
<span id="d_4_6">-</span>
</td>
<td id="r0d5">
</td>
<td id="r0d6">
</td>
</tr>
<tr>
<td>
product
</td>
<td id="r1d1">
week1
</td>
<td id="r1d2">
week2
</td>
<td id="r1d3">
week3
</td>
<td id="r1d4">
week4
</td>
<td id="r1d5">
week5
</td>
<td id="r1d6">
week6
</td>
</tr>
<tr>
<td>
product
</td>
<td id="r2d1">
week1
</td>
<td id="r2d2">
week2
</td>
<td id="r2d3">
week3
</td>
<td id="r2d4">
week4
</td>
<td id="r2d5">
week5
</td>
<td id="r2d6">
week6
</td>
</tr>
<tr>
<td>
product
</td>
<td id="r3d1">
week331
</td>
<td id="r3d2">
week2
</td>
<td id="r3d3">
week3
</td>
<td id="r3d4">
week4
</td>
<td id="r3d5">
week5
</td>
<td id="r3d6">
week6
</td>
</tr>
</table>
</body>
</html>