前期准备： JQ下载地址： https://jquery.com/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON动态生成表格数据,动态列头拼接</title>
<style>
table {
width: 800px;
text-align: center;
border-collapse: collapse;
}
thead tr {
height: 40px;
background-color: rgb(161, 143, 143);
}
td,
th {
padding: 5px;
border: 1px solid rgb(80, 73, 73);
}
</style>
</head>
<body>
<div id="tableContainer"></div>
</body>
<!-- 下载地址： https://jquery.com/, 引入Jqurey，需要根据自己的JQ文件修改路径并引入 -->
<script src="./jquery-3.7.1.min.js"></script>
<script>
function run() {
var list = [{
line: "line1",
station: "stationA",
device: "设备1",
machine: "line1机台数据"
}, {
line: "line1",
station: "stationB",
device: "设备B",
machine: "line1机台数据"
},
{
line: "line1",
station: "stationA",
device: "设备2",
machine: "机台数据"
}, {
line: "line1",
station: "stationC",
device: "设备C",
machine: "line1机台数据"
}, {
line: "line2",
station: "stationC",
device: "设备C",
machine: "line2机台数据"
},
{
line: "line2",
station: "stationA",
device: "设备1",
machine: "line2机台数据"
},
{
line: "line2",
station: "stationA",
device: "设备2",
machine: ""
}, {
line: "line3",
station: "stationC",
device: "设备C",
machine: "line3机台数据"
}
]
let column = [{
label: '',
key: 'station'
},
{
label: '设备',
key: 'device'
}
]
let newLine = []
let newStation = []
for (var i = 0; i < list.length; i++) {
let item = list[i]
// 线别
let lines = findArrIsNow(newLine, item.line)
if (!lines) {
newLine.push(item.line)
}
// station
let stations = findArrIsNow(newStation, item.station)
if (!stations) {
newStation.push(item.station)
}
}
// 组装头部
for (var i = 0; i < newLine.length; i++) {
let line = newLine[i]
column.push({
label: line,
key: line
})
}
// 组装数据
let dataList = []
for (var i = 0; i < newStation.length; i++) {
let col = newStation[i]
for (var j = 0; j < list.length; j++) {
let lsItem = list[j]
// 匹配对应的站点
if (col === lsItem['station']) {
// 查找设备名是否存在
let deviceFinds = findObjectArrIsNow(dataList, 'device', lsItem['device'])
// 不存在就添加
if (!deviceFinds) {
let obj = {
station: col
}
obj['device'] = lsItem['device']
obj[lsItem['line']] = lsItem['machine']
dataList.push(obj)
} else {
deviceFinds[lsItem['line']] = lsItem['machine']
}
}
}
}
document.getElementById('tableContainer').innerHTML = createTable(dataList, column, newLine);
setTimeout(() => {
mergeCell('myTable', [0])
}, 500)
}
// 表格拼接
function createTable(dataList, columnList, lineList) {
var table = '<table id="myTable" border="1">';
// 组装头部
let headrs = '<tr>'
for (var i = 0; i < columnList.length; i++) {
let colTitles = columnList[i]
headrs += '<th>' + colTitles.label + '</th>'
}
headrs += '</tr>';
// 组装body
let bodys = ''
for (var i = 0; i < dataList.length; i++) {
bodys += '<tr>';
for (let tl of columnList) {
// 第一列相同站点需要合并，特殊标记处理
if (tl.key === 'station') {
if (!dataList[i][tl.key]) {
bodys += '<td rowspan=""></td>';
} else {
bodys += '<td rowspan="">' + dataList[i][tl.key] + '</td>';
}
} else {
if (!dataList[i][tl.key]) {
bodys += '<td></td>';
} else {
bodys += '<td>' + dataList[i][tl.key] + '</td>';
}
}
}
bodys += '</tr>';
}
table += headrs + bodys
table += '</table>';
return table;
}
// 查找数组对象是否存在 [{...}]
function findObjectArrIsNow(list, key, value) {
return list.find((fid) => {
return fid[key] === value
})
}
// 查找数组里是否存在 ['']
function findArrIsNow(list, value) {
return list.find((fid) => {
return fid === value
})
}
/**
* @param tableId table的id
* @param cols 需要合并的列
*/
function mergeCell(tableId, cols) {
var table = document.getElementById(tableId);
var table_rows = table.rows;
cols.forEach(v => { // 需要合并的列的数组
for (let i = 0; i < table_rows.length - 1; i++) { // 循环table每一行
// row
let now_row = table_rows[i];
let next_row = table_rows[i + 1];
// col
let now_col = now_row.cells[v];
let next_col = next_row.cells[v];
if (now_col.innerHTML == next_col.innerHTML) { // 判断内容是否相同
$(next_col).addClass('remove'); // 标记为需要删除的列dom
setParentSpan(table, i, v);
}
}
})
$(".remove").remove();
}
/**
* @param table table的dom
* @param row 内容相同行
* @param col 内容相同列
*/
function setParentSpan(table, row, col) {
var col_item = table.rows[row].cells[col];
if ($(col_item).hasClass('remove')) {
setParentSpan(table, --row, col)
} else {
col_item.rowSpan += 1;
}
}
// 运行
run()
</script>
</html>
效果图：
