原生JavaScript，根据后端返回JSON动态【动态列头、动态数据】生成表格数据

本文主要是介绍原生JavaScript，根据后端返回JSON动态【动态列头、动态数据】生成表格数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前期准备： 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)}// stationlet 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>';// 组装bodylet 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 + bodystable += '</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每一行// rowlet now_row = table_rows[i];let next_row = table_rows[i + 1];// collet now_col = now_row.cells[v];let next_col = next_row.cells[v];if (now_col.innerHTML == next_col.innerHTML) { // 判断内容是否相同$(next_col).addClass('remove'); // 标记为需要删除的列domsetParentSpan(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>