使用js合并table中的单元格
用primefaces做的报表，领导要求合并相同内容的单元格，但是primefaces没有找到可以合并单元格的组件，想来想去，只有页面加载后用js合并了。
http://blog.csdn.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合并单元格
使用js合并table中的单元格的更多相关文章
- JS遍历Table的所有单元格内容
用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: 这个方法的参数是唯一标识Table的id,用document对象的获取. function GetInfoFromTable(ta ...
- css实现table中td单元格鼠标悬浮时显示更多内容
table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span cl ...
- js实现表格中不同单元格内容的替换（不同浏览器的节点属性兼容问题）
-------> 效果:点击右下角单元格,左下角单元格内容被替换成和左上角相同,如上图所示. 实现方式:分别获取各个节点,并将左边节点的内容修改成左上方节点的内容. 代码: 注意的地方: ...
- 前台JS遍历Table的所有单元格数据内容
在日常开发过程中为了减少与后台服务器的交互次数,大部分的功能都会放到前台使用JS来完成. 例如:一个表中有ID(FOCUS_SEQ)和Name(COLUMNCTRL)两个字段,其中ID是自定义连续增长 ...
- 帆软报表（finereport）JS实现cpt中详细单元格刷新
1.刷新固定单元格 setInterval(function(){ //获取第二行第 5 列 E2 单元格对象 var _changeCell = $("tr[tridx=1]" ...
- JS获取table表格任意单元格值
jsp页面表格布局 <body onload="show()"> <center> <input type="text" valu ...
- POI写docx文件table中的单元格水平、垂直对齐
核心示例代码 垂直对齐 XWPFTableCell cell = table.getRow(i).getCell(j); cell.setVerticalAlignment(XWPFTableCell ...
- elmentUI为table中的单元格添加事件
<el-main> <el-tabs v-model="curTab" type="card"> <!-- tab签 --> ...
- JS去遍历Table的所有单元格中的内容
用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现 function GetInfoFromTable(tableid) { var tableInfo = ""; ...
随机推荐
- window7修改hosts文件
以管理员身份登录系统 ,修改 C:\Windows\System32\drivers\etc\hosts文件, 在最下面加入类似 192.168.80.10 master192.168.80.11 s ...
- Linux之Redis-redis哨兵集群详解
1.Sentinel 哨兵 Sentinel(哨兵)是Redis 的高可用性解决方案:由一个或多个Sentinel 实例 组成的Sentinel 系统可以监视任意多个主服务器,以及这些主服务器属下的所 ...
- Mysql文章笔记
Mysql名词解释/含义/读书笔记 MVCC(Multiversion concurrency control) MySQL InnoDB存储引擎,实现的是基于多版本号的并发控制协议--MVCC (M ...
- java并发深入
对象由数据+行为组成.数据就是字段,行为就是方法. 并发须要保证这些可被多个线程訪问的共享对象数据的完整性,以及某些特定完整性语义. 比方一个类有一个字段count＝0,两个线程同一时候对它做加1操作 ...
- php 计算gps坐标 距离
在计算机或GPS上经纬度经常用度.分.秒和度.度.分.分.秒.秒的混合方式进行表示,度.分.秒间的进 制是60进制,度.度.分.分. 秒.秒的进制是100进制,换算时一定要注意.可以近似地认为每个纬度 ...
- 设计模式C++实现——适配器模式
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/walkerkalr/article/details/29863177 模式定义: 适 ...
- 使用paramiko的SFTP get或put整个目录
在<使用paramiko执行远程linux主机命令>中举例说明了执行远程linux主机命令的方法,其实paramiko还支持SFTP传输文件. 由于get或put方法每次只能传输一个文件, ...
- UVA10905: Children's Game（排序）
题目:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=68990#problem/A 题目需求:,给n个数字,将它们重新排序得到一个最大的数 ...
- Creating an generated Earth AVI with C++
Creating an generated Earth AVI with C++ EarthGenerator.cpp /* EarthGenerator.cpp An examp ...
- 学习Android开发看那些书好？
学习一样新事物或许有多种方式,报培训班,看视频,向高手请教等等,但一本好书往往可以让你少走很多弯路,事半功倍. 下面推荐几本个人觉得搞Android开发值得一读的书籍. Head First Java ...