將數組中的元素添加到HTML表中

Question

我正嘗試使用數組中的值創建表。我能夠將數組中的值顯示在表中，但我不希望第一個數組中的值出現在表格行中。

function generateTable() { 
 
    //Build an array containing Customer records. 
 
    var listOfActivities = [ 
 
    ["Checkbox", "Activity"], 
 
    ["Alcatraz", "Golden Gate Bridge", 
 
    "Golden Gate Park", "Fisherman's Wharf", "Lands End"] 
 
    ]; 
 

 
    //Create a HTML Table element. 
 
    var table = document.createElement("TABLE"); 
 
    table.border = "1"; 
 

 
    //Get the count of columns. 
 
    for (var i = 0; i < listOfActivities.length; i++) { 
 
    var columnCount = listOfActivities[0].length; 
 
    } 
 

 
    //Add the header row. 
 
    var row = table.insertRow(-1); 
 
    for (var i = 0; i < columnCount; i++) { 
 
    var headerCell = document.createElement("TH"); 
 
    headerCell.innerHTML = listOfActivities[0][i]; 
 
    row.appendChild(headerCell); 
 
    } 
 

 
    //Add the data rows. 
 
    for (var i = 0; i < listOfActivities[1].length; i++) { 
 
    row = table.insertRow(-1); 
 
    for (var j = 0; j < columnCount; j++) { 
 
     var cell = row.insertCell(-1); 
 
     cell.innerHTML = listOfActivities[j][i]; 
 
    } 
 
    } 
 

 
    var dvTable = document.getElementById("dvTable"); 
 
    dvTable.innerHTML = ""; 
 
    dvTable.appendChild(table); 
 
} 
 

 
generateTable();

<table id="dvTable"></table>

Answer 1

這是你在想什麼？

https://jsfiddle.net/d5coza47/

這是我改變

//Add the data rows. 
for (var i = 0; i < listOfActivities[1].length; i++) { 
    row = table.insertRow(-1); 
    for (var j = 1; j < columnCount; j++) { 
     var cell = row.insertCell(0); 
     cell.innerHTML = listOfActivities[j][i]; 
     cell = row.insertCell(0); 
     cell.innerHTML = "<input type='checkbox'>" 
    } 
}