javascript - 使用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);                    
                }

你能帮我在表格中动态添加一个标题吗？

标签： javascript

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>