How to create <th> tag only once-CodePudding

I have a function, that creates a cells in table automatically. It takes information from array and puts it to the cell. But I don't know how to create a header cell for this table with a function. Is there a way to create a whole table with one function? My HTML is next:

<div id="table"> 
   <details>
       <summary >
           day 1
       </summary>
            <table>
                <tr>
                    <th>name</th>
                    <th>count1 </th>
                    <th>count2</th>
                    <th>count3</th>
                </tr>
                <tr id="createTable"></tr>
            </table>
   </details>
</div>

And function is next:

function addTable(array) { 
    var check_value = array;     
    for(var count in check_value){
        var node = document.createElement('tr');   
        node.innerHTML = '<td class ="tdtable">' check_value[count][0] '</td>' 
                         '<td class ="tdtable">' check_value[count][1] '</td>' 
                         '<td class ="tdtable">' check_value[count][2] '</td>' 
                         '<td class ="tdtable">' check_value[count][3] '</td>';
        document.getElementById('createTable').appendChild(node);  
    }
}

CodePudding user response：

how about you add that in another tag called and then in javascript update the innerHTML by "currentHTML" new th tag or you can do by the append method

var tr = document.getElementById('table').tHead.children[0],
    th = document.createElement('th');
th.innerHTML = "This is the new th";
tr.appendChild(th);

CodePudding user response：

Yes, it is possible to create a whole table with one function, including the header cells. To do this, you can use the createElement method to create a element, and then append elements containing and elements to the table.

For example, you could create a function that takes an array of data and creates a table with a header row, like this:

 function createTable(data) {
 // Create a table element
  var table = document.createElement('table');
  
  // Create a header row
  var headerRow = document.createElement('tr');
  headerRow.innerHTML = '<th>name</th><th>count1</th><th>count2</th><th>count3</th>';
  table.appendChild(headerRow);
  
  // Loop through the data and create a row for each item
  for (var i = 0; i < data.length; i  ) {
    var row = document.createElement('tr');
    row.innerHTML = '<td>'   data[i][0]   '</td><td>'   data[i][1]   '</td><td>'   data[i][2]   '</td><td>'   data[i][3]   '</td>';
    table.appendChild(row);
  }
  
  // Return the table
  return table;
}

To use this function, you can call it and pass in the array of data, and then append the returned table element to the #table element in your HTML. For example:

var array = [  ['john', 12, 13, 14],
  ['jane', 15, 16, 17],
  ['bob', 18, 19, 20]
];

var table = createTable(array);
document.getElementById('table').appendChild(table);