配列内の要素を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'>" 
    } 
}