zoukankan      html  css  js  c++  java
  • 复杂表头

    <!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>
  • 相关阅读:
    Codeforces Round #270 solution
    Codeforces Round #269 (Div. 2) solution
    Codeforces Round #268 (Div. 1) solution(upd div 1 C,div 2 A, B
    Codeforces Round #267 (Div. 2) solution
    Unity 绘制多边形
    DOTween 模仿NGUI Tween
    图像混合模式 正片叠底、滤色、叠加
    一只羊的四个月可以生一只小羊,小羊四个月后又可以生一只小羊 问50个月后有多少只羊(羊不会死)
    Unity CCTween UGUI 动画插件
    Unity UGUI 使用 CCTween 实现 打字效果
  • 原文地址:https://www.cnblogs.com/zhoulingfeng/p/7822908.html
Copyright © 2011-2022 走看看