<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>复杂表头</title> </head> <body> <script type="text/javascript"> var data = [ { key: 'A', nodes: 4, children: [ { key: 'A1' }, { key: 'A2', nodes: 2, children: [ { key: 'A21' }, { key: 'A22', nodes: 1, children: [{ key: 'A221' }] } ] }, { key: 'A3' } ] }, { key: 'B', nodes: 4, children: [ { key: 'B1', nodes: 2, children: [ { key: 'B11', nodes: 1, children: [{ key: 'B111' }] }, { key: 'B12' } ] }, { key: 'B2' }, { key: 'B3' } ] } ]; function printColumn(row, layer, index = 0) { if (row.length === 0) return ''; var nextRow = []; var tpl = '<tr>'; row.forEach(v => { if (v.nodes) { tpl += '<td colspan="' + v.nodes + '">' + v.key + '</td>'; nextRow = nextRow.concat(v.children); } else { tpl += '<td rowspan="'+(layer - index)+'">' + v.key + '</td>'; } }); tpl += '</tr>'; if (nextRow.length) { tpl += printColumn(nextRow, layer, index + 1); } return tpl; } function printRow(col, layer, index = 0) { if (layer === index) return ''; col.forEach(v => { let size = layer - index - 1; tpl += '<tr>'; if (v.nodes) { tpl += '<td rowspan="' + (v.nodes) + '">' + v.key + '</td>'; printCell(v.children.shift(), layer, index + 1, size); tpl += '</tr>'; if (v.children.length) { printRow(v.children, layer, index + 1); } } else { tpl += '<td colspan="' + (size + 1) + '">' + v.key + '</td></tr>'; } }); } function printCell(col, layer, index, size) { if (col.nodes) { tpl += '<td rowspan="'+ col.nodes +'">' + col.key + '</td>'; printCell(col.children.shift(), layer, index + 1, size - 1); if (col.children.length) { printRow(col.children, layer, index + 1, size); } } else { tpl += '<td colspan="' + size + '">' + col.key + '</td>'; } } var table = '<table border=1>'; table += printColumn(data, 4); table += '</table>'; var tpl = '<table border=1>'; printRow(data, 4); tpl += '</table>'; document.write(table + tpl); </script> </body> </html>