javascript - How to add css to dynamically created tables -
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> </table>" $("#entrydata").append($table) }); }); }); </script>
the above code creates tables dynamically , displays data json file. apply css(table border color, table bg color, font size, font-family etc.) these tables. solution helpful. in advance.
simple. add 1 class table , apply 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> </table>"
css
table.mystyles { //your styles } table.mystyles td { //your styles }
Comments
Post a Comment