使用 Javascript 將表格導出為 HTML

Question

我正在嘗試將表格導出為 HTML，同時保持樣式不變。

這是一張類似於我試圖導出的表： 我想我離解決方案不遠了，但我仍然無法處理每一行。

這是我到目前為止所做的：

exportHTMLFile: function (object) {

    var processRow = function (row, title) {
        var finalVal = '';
        // row processing goes here    <----------
        return finalVal;
    };

    const {filename, table} = object;
    var htmlFile = '<table>';
    for (var i = 0; i < table.length; i++) {
        htmlFile += processRow(table[i], i === 0);
    }
    htmlFile += '</table>';
    htmlFile = new Blob([htmlFile], {type: 'text/html;charset=utf-8'});
    var downloadHTML;
    downloadHTML = document.createElement('a');
    downloadHTML.download = filename;
    downloadHTML.href = window.URL.createObjectURL(htmlFile);
    downloadHTML.style.display = 'none';
    document.body.appendChild(downloadHTML);
    downloadHTML.click();
    document.body.removeChild(downloadHTML);
}

我現在需要做的是：

1. 弄清楚如何創建類似於上述示例的 HTML 模型。

2. 根據行號（偶數的奇數）交替行的灰色和白色。

3. 做一個循環來填充表格

你們知道我該如何繼續嗎？

編輯：我終於讓它工作了，但現在我在行之間交替顏色時遇到了問題。

我收到以下錯誤：

Uncaught TypeError: Cannot set property 'backgroundColor' of undefined

鑒於 table[i] 不為空，這很奇怪，並且錯誤是由以下行中的單詞style拋出的：

table[i].style.backgroundColor = 'gray';

以下是完整功能現在的樣子：

exportHTMLFile: function (object) {
    var processRow = function (row,title) {
        var htmlString = '<tr>';
        for (var i = 0, len = row.length; i < len; i++) {
            htmlString += '<td>' + row[i] + '</td>';
        }
        htmlString += '</tr>';
        return htmlString;
    };
    const {filename, table} = object;
    var htmlFile = '<table border="1" cellspacing="0" cellpadding="0" width="100%"><tr><td valign="MIDDLE"><p align="LEFT">';
    for (var i = 0; i < table.length; i++) {
        htmlFile += processRow(table[i], i===0);
        if(i%2==0){
            table[i].style.backgroundColor = 'gray';
        }else{
            table[i].style.backgroundColor = 'none';
        }
    }
    htmlFile += '</table>';
    htmlFile = new Blob([htmlFile], {type: 'text/html;charset=utf-8'});
    var downloadHTML;
    downloadHTML = document.createElement('a');
    downloadHTML.download = filename;
    downloadHTML.href = window.URL.createObjectURL(htmlFile);
    downloadHTML.style.display = 'none';
    document.body.appendChild(downloadHTML);
    downloadHTML.click();
    document.body.removeChild(downloadHTML);

}

Answer 1

 let content = { 1: ["this is", "a cool", "table"], 2: ["this is", "another cool", "table"], 3: ["this is", " a crazy cool", "table..."], 4: ["this is", " a crazy cool", "table..."], } for (let i in content) { $("#table").append(`<div style="margin-top: ${i*4}%" class="row"> <div style="background: ${!(i%2) ? "gray" : "none"}" class="col colA">${content[i][0]}</div> <div style="background: ${!(i%2) ? "gray" : "none"}" class="col colB">${content[i][1]}</div> <div style="background: ${!(i%2) ? "gray" : "none"}" class="col colC">${content[i][2]}</div> </div>`); }

 #table { position: absolute; width: 80%; left: 0; right: 0; margin: auto; height: auto; background: gray; } .row { position: absolute; width: 100%; margin-top: 0%; background: gray; } .col { background: gray; position: absolute; border: 1px solid black; } .colA { left: 0%; width: 15%; } .colB { left: 15%; width: 50%; } .colC { left: 65%; width: 35%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="table"> <div class="row"> <div class="col colA"><b>Date</b></div> <div class="col colB"><b>Type</b></div> <div class="col colC"><b>Message</b></div> </div> </div>

Answer 2

感謝喬納斯和埃里克的時間和答案。 不過，我不得不采取不同的方法並使用純 JS 解決方案。 下面是 processRow 函數現在的樣子：

var processRow = function (row,title) {
    var htmlString = '<tr>';
    for (var i = 0, len = row.length; i < len; i++) {
        htmlString += '<td>' + row[i] + '</td>';
    }
    htmlString += '</tr>';
    return htmlString;
};

只有一個小問題； 輸出如下所示： 開頭有一個空行，我真的不知道它來自哪里。