最近开发一个报表功能,其中有个表格就是这样的。通过ajax请求拼接完表格数据以后,调用下面js方法,实现表格首列相同行合并,当然可以扩展列啊。表格没有样式,将就看吧。
<script type="text/javascript" language="javascript">
//合并相同行function mergeFunc(tableId) {
var tab = document.getElementById(tableId);
//maxcol用于设置需要合并的列数
var maxCol = 1;//只合并第一列
var val, count, start;
for (var col = maxCol - 1; col >= 0; col--) {
//用于存储相同个数
count = 1;
val = "";
for (var i = 0; i < tab.rows.length; i++) {
if (val == tab.rows[i].cells[col].innerHTML) {
count++;
} else {
if (count > 1) {
//合并
start = i - count;
tab.rows[start].cells[col].rowSpan = count;
for (var j = start + 1; j < i; j++) { //
tab.rows[j].cells[col].style.display = "none";
tab.rows[j].removeChild(tab.rows[j].cells[col]);
}
count = 1;
}
//赋值,用于循环判断
val = tab.rows[i].cells[col].innerHTML;
}
}
if (count > 1) { //合并,最后几行相同的情况下
start = i - count;
tab.rows[start].cells[col].rowSpan = count;
for (var j = start + 1; j < i; j++) {
tab.rows[j].removeChild(tab.rows[j].cells[col]);
}
}
}
}
</script>