javascript - 如何将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>

以上代码动态创建表格并显示来 self 的 JSON 文件的数据。 我想将 CSS(表格边框颜色、表格背景颜色、字体大小、字体系列等)应用于这些表格。对此的任何解决方案都会有所帮助。提前致谢。

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
 }