1.表格合并同类项
/**
* 渲染表格
* */
function setInputTable(index, id, data) {
//循环渲染表格
var tableInputFactDom; //表格的行数 第几个条形图
for (var k = 0; k < data.length; k++) {
tableInputFactDom = getTRFactTableObj(k, data);
$("#" + id).append(tableInputFactDom);
}
if (data.length>6){
var MyMarhq = '';
// $('.tbl-body' + index + ' tbody').html($('.tbl-body' + index + ' tbody').html() + $('.tbl-body' + index + ' tbody').html());
$('.tbl-body' + index + '').css('top', '0');
var tblTop = 0;
var speedhq = 50; // 数值越大越慢
var outerHeight = $('.tbl-body' + index + ' tbody').find("tr").outerHeight();
function Marqueehq() {
if (tblTop <= -outerHeight * data.length) {
tblTop = 0;
} else {
tblTop -= 1;
}
$('.tbl-body' + index + '').css('top', tblTop + 'px');
}
MyMarhq = setInterval(Marqueehq, speedhq);
// 鼠标移上去取消事件
$('.tbl-body' + index + ' tbody').hover(function() {
clearInterval(MyMarhq);
}, function() {
clearInterval(MyMarhq);
MyMarhq = setInterval(Marqueehq, speedhq);
})
}
uniteTdCells('my-table' + index)
}
//合并第一列相同的
function uniteTdCells(tableId) {
var table = document.getElementById(tableId);
for (let i = 0; i < table.rows.length; i++) {
for (let c = 0; c < table.rows[i].cells.length; c++) {
if (c == 0 ) { //选择要合并的列序数,去掉默认全部合并
for (let j = i + 1; j < table.rows.length; j++) {
let cell1 = table.rows[i].cells[c].innerHTML;
let cell2 = table.rows[j].cells[c].innerHTML;
if (cell1 == cell2) {
table.rows[j].cells[c].style.display = 'none';
table.rows[j].cells[c].style.verticalAlign = 'middle';
table.rows[i].cells[c].rowSpan++;
} else {
table.rows[j].cells[c].style.verticalAlign = 'middle'; //合并后剩余项内容自动居中
break;
};
}
}
}
}
}
2.表格实现效果