使用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 = ""; ...
随机推荐
- 如何使用 libtorch 实现 VGG16 网络？
参考地址:https://ethereon.github.io/netscope/#/preset/vgg-16 按照上面的图来写即可. 论文地址:https://arxiv.org/pdf/1409 ...
- point in polygon algorithm
Point-In-Polygon Algorithm — Determining Whether A Point Is Inside A Complex Polygon © 1998,2006,200 ...
- 分类，logistic回归
1. 使用回归进行分类 机器学习中分类是指输入一个样本点,输出这个样本点所属的类别,预测的是一个离散值,如类别(1,2). 而回归问题是输入一个样本点,预测一个值,这个值是连续值,可以介于\([1,2 ...
- freemarker学习#1
在工作的过程中遇到了.ftl文件.打开发现里面是一些类似于html的代码,非常好奇这是一种什么样的文件,于是去网上搜了一下,了解到.ftl是Freemarker模板的文件后缀名.将问题转移到了Free ...
- mysql复习-来源考试
mysql复习- No1 .登录和权限 (一)常用命令1.登录mysqlmysql -h localhost -u root -p 2.重启mysqlservice mysql restart 延 ...
- odoo继承父类中的函数（方法）
使用_inherit继承父类重新设计新类时,可以调用父类中的函数,具体为: 第一步:获得某个模型('model.name')的数据集并进行某种集合操作(model_function),从而获得想要的数 ...
- 线程管理coroutine
非常好用的协程库,也可以当作线程管理来用 #include "coroutine.h" #include <stdio.h> struct args { int n; ...
- 宏表达式与函数、#undef、条件编译、
宏表达式在预编译期被处理,编译器不知道宏表达式的存在. 宏表达式没有任何的调用开销 宏表达式中不能出现递归定义. C语言中强大的内置宏 __FILE__:被编译的文件名 //双底线 __LINE__: ...
- memento模式
参考资料 • 维基百科:https://en.wikipedia.org/wiki/Memento_pattern • 百度百科:http://baike.baidu.com/link?url=ZQZ ...
- appium 中手势密码的定位坐标
原文地址http://www.cnblogs.com/smallTestKK/p/5408143.html 1.press方法中的坐标为绝对坐标,moveTO方法中的坐标都是相对坐标,具体来说第一个m ...