使用js合并table中的单元格

时间:2023-03-09 08:45:47
使用js合并table中的单元格

用primefaces做的报表,领导要求合并相同内容的单元格,但是primefaces没有找到可以合并单元格的组件,想来想去,只有页面加载后用js合并了。

http://blog.****.net/dengsilinming/article/details/8028490#html 这位老兄给出了例子,只做了少量改动就写出了适合自己的代码,感谢这位老兄。

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>评价信息详情</title>
<script type="text/javascript">
window.onload = function(){fixRowspan([0,1]);}//页面加载完成执行js函数
function fixRowspan(arr) {
var tb = document.getElementById("appraiseDetailBean");
//var arr = [0,1];//对第一列和第二列进行合并
arr.sort(function(a,b){return a<b?1:-1});//从大到小排序,以便先合并后面的列,再合并前面的列
for(var j=0;j<arr.length;j++){
var x = arr[j];
var row_span_num = 1;
var pre_row_value = "";
var pre_row_obj;
for ( var i = 1; i < tb.rows.length; i++) {
var cur_row_value = tb.rows[i].cells[x].innerHTML;
if(pre_row_value == ""){//上一个单元格为空
pre_row_obj = tb.rows[i].cells[x];
pre_row_value = cur_row_value;
}else if(pre_row_value == cur_row_value){//与上一个单元格相等
tb.rows[i].deleteCell(x);
row_span_num++;
if (i == tb.rows.length-1) {//如果最后一个单元格与上一个单元格相等
pre_row_obj.setAttribute("rowSpan", row_span_num);
}
}else{//与上一个单元格不等
pre_row_obj.setAttribute("rowSpan", row_span_num);
row_span_num = 1;
pre_row_obj = tb.rows[i].cells[x];
pre_row_value = cur_row_value;
}
}
}
}
</script>
<style>
td,th{border:solid #add9c0; border-width:0px 1px 1px 0px; padding-left:10px;}
table{border:solid #add9c0; border-width:1px 0px 0px 1px;}
</style>
</head>
<body>
<form action="XXX" method="post" target="mainWorkArea">
<fieldset>
<legend>教师评价</legend>
<div id="content">
<table id="appraiseDetailBean">
<caption>上学期-评价</caption>
<thead>
<tr>
<th>维 度</th>
<th>要 素</th>
<th>关 键 表 现</th>
<th>权重</th>
<th>评 价 标 准</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>运动与健康</td>
<td>习惯与技能</td>
<td>热爱体育运动,养成锻炼习惯,“两操”出勤率高,动作规范,效果好</td>
<td>3.00</td>
<td>
<input type="hidden" name="appraiseItemIndex1" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input>
<input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
<input type="hidden" name="appraiseType" value="teacher"></input>
<input type="hidden" id="studentInput" name="studentNo" value=""></input>
<input type="hidden" name="appraiseWeight1" value="3.00"></input> <input type="radio" id="appraiseResult1_0" name="appraiseResult1" value="A"></input>
<label for="appraiseResult1_0">优</label>
<input type="radio" id="appraiseResult1_1" name="appraiseResult1" value="B"></input>
<label for="appraiseResult1_1">好</label>
<input type="radio" id="appraiseResult1_2" name="appraiseResult1" value="C"></input>
<label for="appraiseResult1_2">良</label>
<input type="radio" id="appraiseResult1_3" name="appraiseResult1" value="D"></input>
<label for="appraiseResult1_3">差</label>
<input type="radio" id="appraiseResult1_4" name="appraiseResult1" value="E"></input>
<label for="appraiseResult1_4">极差</label>
</td>
</tr>
<tr class="even">
<td>运动与健康</td>
<td>习惯与技能</td>
<td>有一定的体育爱好或特长,积极参加各项活动和竞赛,运动会主动参加</td>
<td>4.00</td>
<td>
<input type="hidden" name="appraiseItemIndex2" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input>
<input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
<input type="hidden" name="appraiseType" value="teacher"></input>
<input type="hidden" id="studentInput" name="studentNo" value=""></input>
<input type="hidden" name="appraiseWeight2" value="4.00"></input> <input type="radio" id="appraiseResult2_0" name="appraiseResult2" value="A"></input>
<label for="appraiseResult2_0">优</label>
<input type="radio" id="appraiseResult2_1" name="appraiseResult2" value="B"></input>
<label for="appraiseResult2_1">好</label>
<input type="radio" id="appraiseResult2_2" name="appraiseResult2" value="C"></input>
<label for="appraiseResult2_2">良</label>
<input type="radio" id="appraiseResult2_3" name="appraiseResult2" value="D"></input>
<label for="appraiseResult2_3">差</label>
<input type="radio" id="appraiseResult2_4" name="appraiseResult2" value="E"></input>
<label for="appraiseResult2_4">极差</label>
</td>
</tr>
<tr class="odd">
<td>运动与健康</td>
<td>习惯与技能</td>
<td>具备一定的运动技能,体育课考查情况好</td>
<td>3.00</td>
<td>
<input type="hidden" name="appraiseItemIndex3" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input>
<input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
<input type="hidden" name="appraiseType" value="teacher"></input>
<input type="hidden" id="studentInput" name="studentNo" value=""></input>
<input type="hidden" name="appraiseWeight3" value="3.00"></input> <input type="radio" id="appraiseResult3_0" name="appraiseResult3" value="A"></input>
<label for="appraiseResult3_0">优</label>
<input type="radio" id="appraiseResult3_1" name="appraiseResult3" value="B"></input>
<label for="appraiseResult3_1">好</label>
<input type="radio" id="appraiseResult3_2" name="appraiseResult3" value="C"></input>
<label for="appraiseResult3_2">良</label>
<input type="radio" id="appraiseResult3_3" name="appraiseResult3" value="D"></input>
<label for="appraiseResult3_3">差</label>
<input type="radio" id="appraiseResult3_4" name="appraiseResult3" value="E"></input>
<label for="appraiseResult3_4">极差</label>
</td>
</tr>
<tr class="even">
<td>运动与健康</td>
<td>身心健康状况</td>
<td>心理健康,能控制和调节自己的情绪,能正确的评价自我,积极向上</td>
<td>2.00</td>
<td>
<input type="hidden" name="appraiseItemIndex4" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input>
<input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
<input type="hidden" name="appraiseType" value="teacher"></input>
<input type="hidden" id="studentInput" name="studentNo" value=""></input>
<input type="hidden" name="appraiseWeight4" value="2.00"></input> <input type="radio" id="appraiseResult4_0" name="appraiseResult4" value="A"></input>
<label for="appraiseResult4_0">优</label>
<input type="radio" id="appraiseResult4_1" name="appraiseResult4" value="B"></input>
<label for="appraiseResult4_1">好</label>
<input type="radio" id="appraiseResult4_2" name="appraiseResult4" value="C"></input>
<label for="appraiseResult4_2">良</label>
<input type="radio" id="appraiseResult4_3" name="appraiseResult4" value="D"></input>
<label for="appraiseResult4_3">差</label>
<input type="radio" id="appraiseResult4_4" name="appraiseResult4" value="E"></input>
<label for="appraiseResult4_4">极差</label>
</td>
</tr>
<tr class="odd">
<td>运动与健康</td>
<td>身心健康状况</td>
<td>体育考试合格以上,有良好的身体素质,能正常参加学习劳动</td>
<td>3.00</td>
<td>
<input type="hidden" name="appraiseItemIndex5" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input>
<input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
<input type="hidden" name="appraiseType" value="teacher"></input>
<input type="hidden" id="studentInput" name="studentNo" value=""></input>
<input type="hidden" name="appraiseWeight5" value="3.00"></input> <input type="radio" id="appraiseResult5_0" name="appraiseResult5" value="A"></input>
<label for="appraiseResult5_0">优</label>
<input type="radio" id="appraiseResult5_1" name="appraiseResult5" value="B"></input>
<label for="appraiseResult5_1">好</label>
<input type="radio" id="appraiseResult5_2" name="appraiseResult5" value="C"></input>
<label for="appraiseResult5_2">良</label>
<input type="radio" id="appraiseResult5_3" name="appraiseResult5" value="D"></input>
<label for="appraiseResult5_3">差</label>
<input type="radio" id="appraiseResult5_4" name="appraiseResult5" value="E"></input>
<label for="appraiseResult5_4">极差</label>
</td>
</tr>
<tr class="even">
<td>运动与健康</td>
<td>健康生活方式</td>
<td>讲究卫生,有良好的卫生习惯</td>
<td>3.00</td>
<td>
<input type="hidden" name="appraiseItemIndex6" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input>
<input type="hidden" name="appraiseIndex"
value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
<input type="hidden" name="appraiseType" value="teacher"></input>
<input type="hidden" id="studentInput" name="studentNo" value=""></input>
<input type="hidden" name="appraiseWeight6" value="3.00"></input> <input type="radio" id="appraiseResult6_0" name="appraiseResult6" value="A"></input>
<label for="appraiseResult6_0">优</label>
<input type="radio" id="appraiseResult6_1" name="appraiseResult6" value="B"></input>
<label for="appraiseResult6_1">好</label>
<input type="radio" id="appraiseResult6_2" name="appraiseResult6" value="C"></input>
<label for="appraiseResult6_2">良</label>
<input type="radio" id="appraiseResult6_3" name="appraiseResult6" value="D"></input>
<label for="appraiseResult6_3">差</label>
<input type="radio" id="appraiseResult6_4" name="appraiseResult6" value="E"></input>
<label for="appraiseResult6_4">极差</label>
</td>
</tr>
<tr class="odd">
<td>运动与健康</td>
<td>健康生活方式</td>
<td>珍惜时间,按时作息,生活有规律,合理安排课余生活</td>
<td>2.00</td>
<td>
<input type="hidden" name="appraiseItemIndex7"
value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input>
<input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
<input type="hidden" name="appraiseType" value="teacher"></input>
<input type="hidden" id="studentInput" name="studentNo" value=""></input>
<input type="hidden" name="appraiseWeight7" value="2.00"></input> <input type="radio" id="appraiseResult7_0" name="appraiseResult7" value="A"></input>
<label for="appraiseResult7_0">优</label>
<input type="radio" id="appraiseResult7_1" name="appraiseResult7" value="B"></input>
<label for="appraiseResult7_1">好</label>
<input type="radio" id="appraiseResult7_2" name="appraiseResult7" value="C"></input>
<label for="appraiseResult7_2">良</label>
<input type="radio" id="appraiseResult7_3" name="appraiseResult7" value="D"></input>
<label for="appraiseResult7_3">差</label>
<input type="radio" id="appraiseResult7_4" name="appraiseResult7" value="E"></input>
<label for="appraiseResult7_4">极差</label>
</td>
</tr>
<tr class="even">
<td>公民素养</td>
<td>有社会责任感</td>
<td>关心时政,维护公共利益</td>
<td>1.00</td>
<td>
<input type="hidden" name="appraiseItemIndex8" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input>
<input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
<input type="hidden" name="appraiseType" value="teacher"></input>
<input type="hidden" id="studentInput" name="studentNo" value=""></input>
<input type="hidden" name="appraiseWeight8" value="1.00"></input> <input type="radio" id="appraiseResult8_0"
name="appraiseResult8" value="A"></input>
<label for="appraiseResult8_0">优</label>
<input type="radio" id="appraiseResult8_1" name="appraiseResult8" value="B"></input>
<label for="appraiseResult8_1">好</label>
<input type="radio" id="appraiseResult8_2" name="appraiseResult8" value="C"></input>
<label for="appraiseResult8_2">良</label>
<input type="radio" id="appraiseResult8_3" name="appraiseResult8" value="D"></input>
<label for="appraiseResult8_3">差</label>
<input type="radio" id="appraiseResult8_4" name="appraiseResult8" value="E"></input>
<label for="appraiseResult8_4">极差</label>
</td>
</tr>
<tr class="odd">
<td>公民素养</td>
<td>有社会责任感</td>
<td>扶贫帮困,富有爱心</td>
<td>2.00</td>
<td>
<input type="hidden" name="appraiseItemIndex9" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input>
<input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
<input type="hidden" name="appraiseType" value="teacher"></input>
<input type="hidden" id="studentInput" name="studentNo" value=""></input>
<input type="hidden" name="appraiseWeight9" value="2.00"></input> <input type="radio" id="appraiseResult9_0" name="appraiseResult9" value="A"></input>
<label for="appraiseResult9_0">优</label>
<input type="radio" id="appraiseResult9_1" name="appraiseResult9" value="B"></input>
<label for="appraiseResult9_1">好</label>
<input type="radio" id="appraiseResult9_2" name="appraiseResult9" value="C"></input>
<label for="appraiseResult9_2">良</label>
<input type="radio" id="appraiseResult9_3" name="appraiseResult9" value="D"></input>
<label for="appraiseResult9_3">差</label>
<input type="radio" id="appraiseResult9_4" name="appraiseResult9" value="E"></input>
<label for="appraiseResult9_4">极差</label>
</td>
</tr>
<tr class="even">
<td>公民素养</td>
<td>有社会责任感</td>
<td>积极参加环保等实践活动</td>
<td>2.00</td>
<td>
<input type="hidden" name="appraiseItemIndex10" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input>
<input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
<input type="hidden" name="appraiseType" value="teacher"></input>
<input type="hidden" id="studentInput" name="studentNo" value=""></input>
<input type="hidden" name="appraiseWeight10" value="2.00"></input> <input type="radio" id="appraiseResult10_0" name="appraiseResult10" value="A"></input>
<label for="appraiseResult10_0">优</label>
<input type="radio" id="appraiseResult10_1" name="appraiseResult10" value="B"></input>
<label for="appraiseResult10_1">好</label>
<input type="radio" id="appraiseResult10_2" name="appraiseResult10" value="C"></input>
<label for="appraiseResult10_2">良</label>
<input type="radio" id="appraiseResult10_3" name="appraiseResult10" value="D"></input>
<label for="appraiseResult10_3">差</label>
<input type="radio" id="appraiseResult10_4" name="appraiseResult10" value="E"></input>
<label for="appraiseResult10_4">极差</label>
</td>
</tr>
<tr class="odd">
<td>公民素养</td>
<td>注重修养举止文明</td>
<td>勤劳节俭,仪表着装得体</td>
<td>2.00</td>
<td>
<input type="hidden" name="appraiseItemIndex11" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input>
<input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
<input type="hidden" name="appraiseType" value="teacher"></input>
<input type="hidden" id="studentInput" name="studentNo" value=""></input>
<input type="hidden" name="appraiseWeight11" value="2.00"></input> <input type="radio" id="appraiseResult11_0" name="appraiseResult11" value="A"></input>
<label for="appraiseResult11_0">优</label>
<input type="radio" id="appraiseResult11_1" name="appraiseResult11" value="B"></input>
<label for="appraiseResult11_1">好</label>
<input type="radio" id="appraiseResult11_2" name="appraiseResult11" value="C"></input>
<label for="appraiseResult11_2">良</label>
<input type="radio" id="appraiseResult11_3" name="appraiseResult11" value="D"></input>
<label for="appraiseResult11_3">差</label>
<input type="radio" id="appraiseResult11_4" name="appraiseResult11" value="E"></input>
<label for="appraiseResult11_4">极差</label>
</td>
</tr>
<tr class="even">
<td>公民素养</td>
<td>注重修养举止文明</td>
<td>未经家长或老师同意不得在外住宿或留宿他人</td>
<td>1.00</td>
<td>
<input type="hidden" name="appraiseItemIndex12" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input>
<input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
<input type="hidden" name="appraiseType" value="teacher"></input>
<input type="hidden" id="studentInput" name="studentNo" value=""></input>
<input type="hidden" name="appraiseWeight12" value="1.00"></input> <input type="radio" id="appraiseResult12_0" name="appraiseResult12" value="A"></input>
<label for="appraiseResult12_0">优</label>
<input type="radio" id="appraiseResult12_1" name="appraiseResult12" value="B"></input>
<label for="appraiseResult12_1">好</label>
<input type="radio" id="appraiseResult12_2" name="appraiseResult12" value="C"></input>
<label for="appraiseResult12_2">良</label>
<input type="radio" id="appraiseResult12_3" name="appraiseResult12" value="D"></input>
<label for="appraiseResult12_3">差</label>
<input type="radio" id="appraiseResult12_4" name="appraiseResult12" value="E"></input>
<label for="appraiseResult12_4">极差</label>
</td>
</tr>
<tr class="odd">
<td>公民素养</td>
<td>注重修养举止文明</td>
<td>尊敬师长,礼貌待人,语言文明</td>
<td>2.00</td>
<td>
<input type="hidden" name="appraiseItemIndex13" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input>
<input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
<input type="hidden" name="appraiseType" value="teacher"></input>
<input type="hidden" id="studentInput" name="studentNo" value=""></input>
<input type="hidden" name="appraiseWeight13" value="2.00"></input> <input type="radio" id="appraiseResult13_0" name="appraiseResult13" value="A"></input>
<label for="appraiseResult13_0">优</label>
<input type="radio" id="appraiseResult13_1" name="appraiseResult13" value="B"></input>
<label for="appraiseResult13_1">好</label>
<input type="radio" id="appraiseResult13_2" name="appraiseResult13" value="C"></input>
<label for="appraiseResult13_2">良</label>
<input type="radio" id="appraiseResult13_3" name="appraiseResult13" value="D"></input>
<label for="appraiseResult13_3">差</label>
<input type="radio" id="appraiseResult13_4" name="appraiseResult13" value="E"></input>
<label for="appraiseResult13_4">极差</label>
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</form>
</body>
</html>

table合并单元格