Как добавить CSS для динамически создаваемых таблиц

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> 

Приведенный выше код создает таблицы динамически и данные отображаются из моего файла JSON. Я хотел бы применить к этим таблицам CSS (цвет рамки таблицы, цвет таблицы bg, размер шрифта, семейство шрифтов и т. Д.). Любое решение этого было бы полезно. Заранее спасибо.

Answer 1

Простой. Добавьте один класс для своей таблицы и примените стили с помощью 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 
} 

Answer 2

Брус применить свой стиль в этой части кода:

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>" 

Answer 3

Вы можете добавить style или класс к table при создании.

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>" 

К классу:

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; 
    .... 
} 

Или

После таблицы создается и добавляется к entrydata.

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

Я бы рекомендовал использовать подход class.