如何动态获取表行并创建Excel工作表

Question

我有以下脚本，该脚本占用第一行（TH）并将其动态添加到表中，然后将其导出到Excel工作表。出于某种原因，它会不断添加和堆叠在下一个表格行的顶部。

这是脚本：

var decode_entities = (function () {
    // Remove HTML Entities
    var element = document.createElement('div');

    function decode_HTML_entities(str) {

        if (str && typeof str === 'string') {

            // Escape HTML before decoding for HTML Entities
            str = escape(str).replace(/%26/g, '&').replace(/%23/g, '#').replace(/%3B/g, ';');

            element.innerHTML = str;
            if (element.innerText) {
                str = element.innerText;
                element.innerText = '';
            } else {
                // Firefox support
                str = element.textContent;
                element.textContent = '';
            }
        }
        return unescape(str);
    }
    return decode_HTML_entities;
})();

function fnExcelReport() {
    var tab_text = "<table border='0'><tr bgcolor='#FFFFFF' class='mainTR'>";
    var textRange;
    var j, p = "", q = "";
    var tab = document.getElementById('BookingResults'); // id of table


    for (j = 0 ; j < tab.rows.length ; j++) {
        for (var y = 0; y < tab.rows[j].cells.length; y++) {
            if (y == tab.rows[j].cells.length - 1) {
                if (j == 0) {
                    q = q + "<TH scope=col class='headerLast vTop'>";
                }
                else {
                    q = q + "<TD class='bodyLast vTop'>";
                }
                q = q + decode_entities(tab.rows[j].cells[y].innerHTML);
                //alert("LAST COL INNER HTML: " + decode_entities(tab.rows[j].cells[y].innerHTML));
                if (j == 0) {
                    q = q + "</TH>";
                }
                else {
                    q = q + "</TD>";
                }
            }
            else {
                if (j == 0) {
                    q = q + "<TH scope=col class='headerNotLast vTop'>";
                }
                else {
                    q = q + "<TD class='bodyNotLast vTop'>";
                }
                q = q + tab.rows[j].cells[y].innerHTML;
                if (j == 0) {
                    q = q + "</TH>";
                }
                else {
                    q = q + "</TD>";
                }
                p = p + tab.rows[j].cells[y].innerHTML;
                //alert("NOT LAST COL INNERHTML: " + p);
            }
        }
        //alert(q);
        //q = "";
        //alert(tab.rows[j].innerHTML);
        //tab_text = tab_text + tab.rows[j].innerHTML + "</tr><tr bgcolor='#FFFFFF' class='mainTR'>";
        tab_text = tab_text + q + "</tr><tr bgcolor='#FFFFFF' class='mainTR'>";
        alert(tab_text);
    }

    tab_text = tab_text + "</table>";
    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
    tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
    {
        txtArea1.document.open("txt/html", "replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus();
        sa = txtArea1.document.execCommand("SaveAs", true, "SpecificGuidelines.xls");
    }
    else {                //other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
    }

    return (sa);
}

这是第一个警报（显示第一行（TH））：

这是第二个警告（红色突出显示正在重复，我确信在第三次运行时，前两个会重复，等等......）：

如何确保TH / TD不会加起来，而是转到下一行并附加。

所以我希望修改脚本，因为它是：

<table>
    <tr>
        <th></th> //TH is the header so it appears only once in the table.
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    ...
</table>

现在发生了什么：

<table>
    <tr>
        <th></th>
    </tr>
    <tr>
        <th></th> //brought from the first entry
        <td></td>
    </tr>
    <tr>
        <th></th> //brought from the first entry
        <td></td> //brought from the second entry
        <td></td>
    </tr>
    ...
</table>

Answer 1

您需要将<tr bgcolor='#FFFFFF' class='mainTR'>移动到循环中，为循环的每次迭代打开一行，然后在循环结束时（但在其中）关闭<tr>。

您的开放标记位于行循环之外，而关闭位于循环之后，因此您只创建一行。

var tab_text = "<table border='0'>";
for (j = 0 ; j < tab.rows.length ; j++) {
    tab_text+='<tr>'
        /* loop over cells here */

    tab_text+='</tr>';

}