使用javascript動態插入表格標題

Question

我試圖將一個表頭僅添加一次到表的頂部。 我有一個代碼，可以在其中插入行后生成標頭。 我在這里缺少索引。 我只有在插入第二行后才能添加標題。 您能幫我在這里解決一個小錯誤嗎？ 我不想從html頁面傳遞任何對象。

var table = document.getElementById("Table");

            // Empty tables
            while(table.rows.length > 0) {table.deleteRow(0);}

            // Add rows
            for (var i = 1; i<data.Contents.length; i++) {
                var row = table.insertRow(i-1);
                var cell1 = row.insertCell(0), cell2 = row.insertCell(1),cell3 = row.insertCell(2),cell4 = row.insertCell(3),cell5 = row.insertCell(4),cell6 = row.insertCell(5),cell7 = row.insertCell(6);
                var cell8 = row.insertCell(7), cell9 = row.insertCell(8),cell10 = row.insertCell(9),cell11 = row.insertCell(10),cell12 = row.insertCell(11),cell13 = row.insertCell(12),cell14 = row.insertCell(13);


                //Code for header
                var header = document.getElementById("Table").rows[0].cells;
                header[0].innerHTML = " ";
                header[1].innerHTML = " ";
                header[2].innerHTML = "<b>NAME</b>";
                header[4].innerHTML = "<b>MODIFIED</b>";
                header[6].innerHTML = "<b>TIME</b>";
                header[8].innerHTML = " ";
                header[10].innerHTML = "<b>MORE</b>";     
                header[12].innerHTML = " ";      


                //column1: file icon
                var btn_fileIcon = document.createElement("input");
                btn_fileIcon.setAttribute("type","image");
                btn_fileIcon.setAttribute("src","images/file.png");
                btn_fileIcon.setAttribute("style","height:20px;width:20px");
                cell2.appendChild(btn_fileIcon);

                // column2: file name
                cell3.innerHTML =  data.Contents[i].Key.replace(folderName+'/', '');//data.Contents[i].Key;

                // Time
                var str = dateModified( data.Contents[i].LastModified);
                cell5.innerHTML = "  " + str;
                cell5.setAttribute("style","padding-left: 4cm");
                cell5.setAttribute("position","fixed");
                cell5.style.textAlign = "center";

                // size
                var s = Math.round( data.Contents[i].Size/1024);
                var fileSize = s.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                cell7.innerHTML = fileSize + " KB";
                cell7.setAttribute("style","padding-left: 4cm");
                cell7.setAttribute("position","fixed");
                cell7.style.textAlign = "center";

                // column3: download (csv)
                var btn_download = document.createElement("input");
                btn_download.setAttribute("type","image");
                btn_download.setAttribute("src","images/download-button.png");
                btn_download.setAttribute("style","height:20px;width:20px;margin-left: 100px;margin-right: 10px;");
                btn_download.setAttribute("onclick","load2local(this);");
                btn_download.fileName =  data.Contents[i].Key;
                cell9.appendChild(btn_download);


                // column4: delete
                var btn_delete = document.createElement("input");
                btn_delete.setAttribute("type","image");
                btn_delete.setAttribute("src","images/close-browser.png");
                btn_delete.setAttribute("style","height:20px;width:20px;margin-left: 10px;margin-right: 10px;");
                btn_delete.setAttribute("onclick","deleteObj(this);");
                btn_delete.fileName =  data.Contents[i].Key;
                cell11.appendChild(btn_delete);

                // load to NB
                var btn_load2NB = document.createElement("input");
                btn_load2NB.setAttribute("type","image");
                btn_load2NB.setAttribute("src","images/eye.png");
                btn_load2NB.setAttribute("style","height:25px;width:25px;margin-left: 10px;margin-right: 10px;");
                btn_load2NB.fileName =  data.Contents[i].Key;
                btn_load2NB.setAttribute("onclick","load2NB(this);");
                btn_load2NB.fileSize =  data.Contents[i].Size;
                cell13.appendChild(btn_load2NB);

                // checkbox
                var checkbox = document.createElement("input"); 
                checkbox.setAttribute("type", "checkbox");
                checkbox.setAttribute("name", "all");
                checkbox.setAttribute("value", "ff");
                checkbox.fileName = data.Contents[i].Key;
                cell1.appendChild(checkbox); 
                checkbox.checked = false;   

                var element = document.createElement('hr');
                // element.setAttribute("style","border: 1px solid black;text-align: left; margin-left: 2%; margin-right:2%;");
                element.filename = data.Contents[i].Key;
                cell14.appendChild(element);                    
                }

您能幫我一次向表中動態添加標頭嗎？

Answer 1

這是動態添加表頭的一種方法。

 <html> <script> const tableHeaders = ['My Header1','My Header2','My Header3','My Header4'] // your header titles go here function createNewTableHeader(headerTitle){ const temp = document.createElement('th'); temp.appendChild(document.createTextNode(headerTitle)); return temp } function addHeader() { var tableHeaderPlaceHolder = document.getElementById('table-header-place-holder'); tableHeaders.forEach(header=>{ tableHeaderPlaceHolder.appendChild(createNewTableHeader(header)); }) } document.addEventListener("DOMContentLoaded", function(event) { addHeader(); }); </script> <body> <table id='table' cellspacing="20"> <tbody> <tr id='table-header-place-holder'> </tr> </tbody> <tbody> <tr> <td>data1</td> <td>data2</td> <td>data3</td> <td>data4</td> </tr> <tr> <td>data1</td> <td>data2</td> <td>data3</td> <td>data4</td> </tr> </tbody> </table> </body> </html>