How to add css to dynamically created tables

Question

HTML

<div class="wrapper">
    <div class="profile">
        <div id='entrydata'></div>
    </div>
</div>

Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
    var dmJSON = "data.json";
    $.getJSON(dmJSON, function(data) {
        $.each(data.records, function(i, f) {
            var $table = "<table border=5><tbody><tr>" + "<td>" + f.Clue + "</td></tr>" + "<tr><td>" + f.Answer + "</td></tr>" + "<tr><td>" + f.Status + "</td></tr>" + "<tr><td> " + f.Views + "</td></tr>" + "</tbody>&nbsp;&nbsp;&nbsp;</table>"
            $("#entrydata").append($table)
        });
    });
});
</script>

The above code creates tables dynamically and displays data from my JSON file. I would like to apply CSS(Table border color, table bg color, font size, font-family etc.) to these tables. Any solution to this would be helpful. Thanks in advance.

You need to have classes or IDs or inline css to elements which are to be appended in DOM..Syle will get affected as the elements are been rendered... — Rayon
– Rayon, Commented May 14, 2015 at 5:31

Suresh Ponnukalai · Accepted Answer · 2015-05-14 05:31:38Z

2

Simple. Add one class for your table and apply the styles through css.

var $table="<table class='mystyles' border=5><tbody><tr>" + "<td>" + f.Clue + "</td></tr>" + "<tr><td>" + f.Answer + "</td></tr>" + "<tr><td>" + f.Status + "</td></tr>" + "<tr><td> " + f.Views + "</td></tr>" + "</tbody>&nbsp;&nbsp;&nbsp;</table>"

CSS

 table.mystyles
 {
     //your styles
 }
 table.mystyles td
 {
     //your styles
 }

answered May 14, 2015 at 5:31

Suresh Ponnukalai

14k5 gold badges36 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tushar · Accepted Answer · 2015-05-14 05:36:37Z

You can add style or class to the table while creating.

var $table = "<table border=5 style='border: 1px solid red, ...'><tbody><tr>" + "<td>" + f.Clue + "</td></tr>" + "<tr><td>" + f.Answer + "</td></tr>" + "<tr><td>" + f.Status + "</td></tr>" + "<tr><td> " + f.Views + "</td></tr>" + "</tbody>&nbsp;&nbsp;&nbsp;</table>"

By class:

var $table = "<table border=5 class='myTable'><tbody><tr>" + "<td>" + f.Clue + "</td></tr>" + "<tr><td>" + f.Answer + "</td></tr>" + "<tr><td>" + f.Status + "</td></tr>" + "<tr><td> " + f.Views + "</td></tr>" + "</tbody>&nbsp;&nbsp;&nbsp;</table>"

CSS:

.myTable {
    border: 1px solid red;
    ....
}

Or

After table is created and appended to entrydata.

$('#entrydata table').css({
    border: '1px solid red',
    ....
});

I would recommend to use class approach.

Parkash · Accepted Answer · 2015-05-14 05:33:20Z

0

Cant you apply your style on this part of code:

var $table="<table border=5 style='background:#fff;.....'><tbody><tr>" + "<td>" + f.Clue + "</td></tr>" + "<tr><td>" + f.Answer + "</td></tr>" + "<tr><td>" + f.Status + "</td></tr>" + "<tr><td> " + f.Views + "</td></tr>" + "</tbody>&nbsp;&nbsp;&nbsp;</table>"

answered May 14, 2015 at 5:33

Parkash

1031 silver badge12 bronze badges

Collectives™ on Stack Overflow

How to add css to dynamically created tables

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related