Javascript: dynamically create table column headings with text

Question

I am creating a whole HTML table, dynamically from Javascript. That includes also the table heading creation dynamically, and I want each table heading to contain some text. So i want to achieve something like this:

<th>#</th> 
<th>City</th> 
<th>State</th> 
<th>Region</th>

The way I am generating this from Javascript, for the single column heading, is the following, but it doesnt work. So when I do that, I only get a <th></th> HTML, with no text inside.

    function createTableHeaders(table) {
        // get my row template
        var table_row = $($("#my_table_row").html());

        // get my table column heading template
        var table_header = $($("#my_table_col_heading").html());

        // insert some text to the column heading
        // none of these below work ...
        table_header.innerHTML = "City";
        table_header.innerText = "City";
        table_header.text = "City";

        // append table column heading to table row with headings
        table_row.append(table_header);

        // append the entire row to the table
        table.append(table_row);

}

On a side note, I would also like to be able to add some custom CSS to the text that I want to have in the column heading. How can I do this?

HTML templates

<!-- Define table -->
<script type="text" id="my_table">            
    <table class="a-bordered a-align-center a-spacing-base a-size-base"></table>
</script>

<!-- Define table heading element: each column has it's own heading -->
<script type="text" id="my_table_col_heading">
    <th class="a-color-base a-size-base a-text-center"></th>
</script>

<!-- Define table row -->
<script type="text" id="my_table_row">
    <tr class="a-spacing-base a-spacing-top-base a-text-center"></tr>
</script>

could you share the html templates ? – Deep Dec 18 '16 at 14:14 — Deep, Dec 18 '16 at 14:14

Deep · Accepted Answer · 2016-12-18T15:46:48.503

Since $($("#my_table_col_heading").html()); will give you an array you will have to access the element using the index like this.

table_header[0].innerHTML = "City;"

Working example:

function createTableHeaders(table) {
        // get my row template
        var table_row = $($("#my_table_row").html());

        // get my table column heading template
        var table_header = $($("#my_table_col_heading").html());
  
        table_header[0].innerHTML = "City"
        
        table_header.addClass("customclass");
        
        // append table column heading to table row with headings
        table_row.append(table_header);

        // append the entire row to the table
        table.append(table_row);
  
        $("#container").append(table);



}

createTableHeaders($($("#my_table").html()))

.customclass
{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Define table -->
<script type="text" id="my_table">            
    <table class="a-bordered a-align-center a-spacing-base a-size-base"></table>
</script>

<!-- Define table heading element: each column has it's own heading -->
<script type="text" id="my_table_col_heading">
    <th class="a-color-base a-size-base a-text-center"></th>
</script>

<!-- Define table heading -->
<script type="text" id="my_table_col_heading">
    <th class="a-color-base a-size-base a-text-center"></th>
</script>

<!-- Define table row -->
<script type="text" id="my_table_row">
    <tr class="a-spacing-base a-spacing-top-base a-text-center"></tr>
</script>

<div id="container">
  </div>

Yes, it works. However I dont quite understand how it returns an array. Array of what? It is a reference to a specific column heading. — zwiebl, Dec 18 '16 at 14:44
I have updated the answer for the CSS answer. read here for more understanding on your first question thats why it returns an array but .val(), .html(), .css () works fine. http://stackoverflow.com/questions/7183704/jquery-id-selector-id-returns-array — Deep, Dec 18 '16 at 14:54
No, I would like to insert my existing CSS class, not just single attribute as color. Is that possible? — zwiebl, Dec 18 '16 at 14:59
i think you will just have to include the css in your html using link ,and the css will be auto applied when you add that class using .addClass() method into the element — Deep, Dec 18 '16 at 15:46

score 0 · Answer 2 · answered Dec 18 '16 at 14:44

You need to use table_header.html("City")

function createTableHeaders(table) {
  // get my row template
  var table_row = $($("#my_table_row").html());

  // get my table column heading template
  var table_header = $($("#my_table_col_heading").html());

  table_header.html("City"); // This is the change

  // append table column heading to table row with headings
  table_row.append(table_header);

  // append the entire row to the table
  table.append(table_row);

  $("#container").append(table);
}

createTableHeaders($($("#my_table").html()))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Define table -->
<script type="text" id="my_table">
  <table class="a-bordered a-align-center a-spacing-base a-size-base"></table>
</script>

<!-- Define table heading element: each column has it's own heading -->
<script type="text" id="my_table_col_heading">
  <th class="a-color-base a-size-base a-text-center"></th>
</script>

<!-- Define table heading -->
<script type="text" id="my_table_col_heading">
  <th class="a-color-base a-size-base a-text-center"></th>
</script>

<!-- Define table row -->
<script type="text" id="my_table_row">
  <tr class="a-spacing-base a-spacing-top-base a-text-center"></tr>
</script>

<div id="container">
</div>

Javascript: dynamically create table column headings with text

2 Answers2