目前做到了一个需求，需要用到课表，对课堂内容进行管理，但是存在很多的合堂课，需要多节课连续上下来，因此下图1的课表需要连续操作多节课。如果连堂课的单元格进行合并，可以有效解决这个问题，如图2
图1
图2
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
table{
BORDER-COLLAPSE: collapse;
width: 1000px;
margin: 0 auto;
}
td{
border: 1px solid;
width: 100px;
}
</style>
</head>
<body>
<table id = "tab">
<tr>
<td></td>
<td>周一</td>
<td>周二</td>
<td>周三</td>
<td>周四</td>
<td>周五</td>
<td>周六</td>
<td>周天</td>
</tr>
<tr>
<td>1</td>
<td>语文</td>
<td>数学</td>
<td>科学</td>
<td>英语</td>
<td>语文</td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>语文</td>
<td>数学</td>
<td>科学</td>
<td>英语</td>
<td>语文</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>数学</td>
<td>体育</td>
<td>语文</td>
<td>英语</td>
<td>数学</td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>数学</td>
<td>体育</td>
<td>语文</td>
<td>英语</td>
<td>数学</td>
<td></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>政治</td>
<td>实操</td>
<td>政治</td>
<td>美术</td>
<td>自习</td>
<td></td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>政治</td>
<td>实操</td>
<td>政治</td>
<td>体育</td>
<td>自习</td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>自习</td>
<td>实操</td>
<td>自由活动</td>
<td>体育</td>
<td>自习</td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
<script type="text/javascript">
$(function(){
var totalrows = $("#tab").find("tr").eq(1).find("td").length;
var totalcols = $("#tab").find("tr").length;
for(var i=1;i<totalcols;i++){
var rowspan = 1;
var startrows = $("#tab").find("tr").eq(1).find("td").eq(i);//当前单元格
for(var j=1;j<totalrows;j++){
var targetrows = $("#tab").find("tr").eq(j+1).find("td").eq(i);//当前单元格的下一单元格
if(startrows.text()!=""&&targetrows.text()!=""&&startrows.text()==targetrows.text()){//若当前与目标相等则继续比较，并合并单元格，隐藏多余单元格
rowspan++;
startrows.attr("rowspan",rowspan);
targetrows.attr("style","display:none");
}else{//若不相等则当前单元格等于目标单元格，继续向下比较
rowspan=1;
startrows = targetrows;
}
}
}
});
</script>
</html>
如果上午上4节课下午上3节课的时候就会出现像周三3 4 5 6节一样，上下午的课也合并了，因此可以区分上下午，假设swks(上午课时)为4，效果如图3
图3
代码：
$(function(){
var totalrows = $("#tab").find("tr").eq(1).find("td").length;
var totalcols = $("#tab").find("tr").length;
var swks = 4;
for(var i=1;i<totalcols;i++){
var rowspan = 1;
var startrows = $("#tab").find("tr").eq(1).find("td").eq(i);//当前单元格
for(var j=1;j<totalrows;j++){
var targetrows = $("#tab").find("tr").eq(j+1).find("td").eq(i);//当前单元格的下一单元格
if(j>=swks+1){
if(startrows.text()!=""&&targetrows.text()!=""&&startrows.text()==targetrows.text()){//若当前与目标相等则继续比较，并合并单元格，隐藏多余单元格
rowspan++;
startrows.attr("rowspan",rowspan);
targetrows.attr("style","display:none");
}else{//若不相等则当前单元格等于目标单元格，继续向下比较
rowspan=1;
startrows = targetrows;
}
}else if(j<swks+1){
if(j<swks){
if(startrows.text()!=""&&targetrows.text()!=""&&startrows.text()==targetrows.text()){//若当前与目标相等则继续比较，并合并单元格，隐藏多余单元格
rowspan++;
startrows.attr("rowspan",rowspan);
targetrows.attr("style","display:none");
}else{//若不相等则当前单元格等于目标单元格，继续向下比较
rowspan=1;
startrows = targetrows;
}
}else{
rowspan=1;
startrows = targetrows;
}
}
}
}
});
浙公网安备 33010602011771号