表结构修饰符

Question

我编写了一个JS代码，通过解析特定表类的网页并将表的行存储在数组中来修改表的结构。

并使用数组构造新表。密码在下面。

(function() {

    'use strict';

    var headElements = new Array();
    var bodyElements = new Array();
    var tableElement;

    var selector = ".Tabelle-Titel-nur-oben";

    function reinitialize() {
        headElements = [];
        bodyElements = [];
        tableElement;
    }

    function constructTable(reference) {
        tableElement = document.createElement('table');
        var att = document.createAttribute("class"); // Create a "class" attribute
        att.value = "demoTable"; // Set the value of the class attribute
        tableElement.setAttributeNode(att); // Add the class attribute to <h1>
        appendRow(reference);

    }

    function appendRow(reference) {
        var clonedTable = tableElement.cloneNode(true);
        var headClass = document.createAttribute("class");
        headClass.value = 'Zellen-Titel-nur-oben';
        for (var i = 0; i < bodyElements.length; i++) {
            for (var j = 0; j < headElements.length; j++) {
                var row = clonedTable.insertRow();
                var clonedRow = row.cloneNode(true);
                var cell0 = clonedRow.insertCell();
                var cloneHeadClass = headClass.cloneNode(true);
                cell0.setAttributeNode(cloneHeadClass);
                cell0.innerHTML = headElements[j].innerHTML;
                var cell1 = clonedRow.insertCell();

                cell1.innerHTML = bodyElements[i][j].innerHTML;
                clonedTable.appendChild(clonedRow);
            }
        }
        document.body.insertBefore(clonedTable, reference);
    }

    function selectTables(selector) {
        var elements = document.querySelectorAll(selector);

        for (var i = 0; i < elements.length; i++) {
            parseHead(elements[i]);
            parseBody(elements[i]);
            constructTable(elements[i]);
            reinitialize();
        }
    }


    function parseHead(nodes) {

        var theadElements = nodes.querySelectorAll('thead');

        for (var i = 0; i < theadElements.length; i++) {
            var rows = theadElements[i]['rows'];
            for (var j = 0; j < rows.length; j++) {
                var children = rows[j]['children'];
                for (var k = 0; k < children.length; k++) {
                    headElements.push(children[k]);
                }
            }
        }
    }

    function parseBody(nodes) {
        var children = 'children';
        var tbody = 'tbody';
        var tBodyElements = nodes.querySelectorAll(tbody);

        for (var i = 0; i < tBodyElements.length; i++) {
            var tBodyChildren = tBodyElements[i][children];
            for (var j = 0; j < tBodyChildren.length; j++) {
                // row level
                var greatChildren = tBodyChildren[j][children];
                var innerElements = [];
                for (var k = 0; k < greatChildren.length; k++) {
                    innerElements.push(greatChildren[k]);
                }
                bodyElements.push(innerElements);
            }
        }
    }



    selectTables(selector);


})();

表格结构：

<table id="table-4" class="Tabelle-Titel-nur-oben ng-scope">
    <colgroup>
        <col class="Row-Column-27">
            <col class="Row-Column-27">
    </colgroup>
    <thead>
        <tr class="Row-Column-28">
            <td class="Zellen-Titel-nur-oben">
                <p class="Tabelle-Titel-oben">Mensch als Individualwesen</p>
            </td>
            <td class="Zellen-Titel-nur-oben">
                <p class="Tabelle-Titel-oben">Mensch als Sozialwesen</p>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr class="Row-Column-29">
            <td class="Zellen-Body-Rows-normal cell-style-override-6">
                <p class="Flie-text-normal"><span class="Fett">Eigene Wünsche</span>
                </p>
                <p class="Flie-text-normal">d.h., der Mensch steht im Mittelpunkt der Betrachtung.</p>
            </td>
            <td class="Zellen-Body-Rows-normal cell-style-override-6">
                <p class="Flie-text-normal"><span class="Fett">Miteinander</span>
                </p>
                <p class="Flie-text-normal">d.h., der Mensch ist von seiner Natur her auf ein soziales Miteinander bezogen und angewiesen.</p>
            </td>
        </tr>
        <tr class="Row-Column-30">
            <td class="Zellen-Body-Rows-normal">
                <p class="Flie-text-normal">individual/individuell (lat.) = einzeln</p>
            </td>
            <td class="Zellen-Body-Rows-normal">
                <p class="Flie-text-normal">socialis (lat.) = gesellschaftlich </p>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

我们的目标是转置和扁平表，所以我们只需保留一个转置的头阵列，然后迭代每一行源行，并在每个单元格中输出一行，每个单元格都有相应的头单元格(S)。

这是一个非常简单和线性的转换，所以如果我们用更快、更简单的insertAdjacentHTML和ES2015箭头函数来替换笨拙的DOM操作，代码也可能是线性的(我们同样可以使用冗长的function )。

function transformTables()
{
    let map = (a, fn) => Array.prototype.map.call(a, fn);
    let forEach = (a, fn) => Array.prototype.forEach.call(a, fn);

    forEach(document.querySelectorAll('table.Tabelle-Titel-nur-oben'), table => {
        let head = map(table.tHead.rows[0].cells,
            (cell, i) => map(table.tHead.rows,
                row => row.cells[i].outerHTML
            ).join('')
        );
        table.insertAdjacentHTML('beforebegin',
            '<table class="demoTable">' + map(table.tBodies,
                body => '<tbody>' + map(body.rows,
                    row => map(row.cells,
                        (cell, i) => '<tr>' + head[i] + cell.outerHTML + '</tr>'
                    ).join('')
                ).join('') +'</tbody>'
            ).join('') + '</table>'
        );
    });
}