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应用样式。

# Here's a method that will check whether the input is ok
def isValidCharacterClassInput(userInput):
    try:
        # Return True if the input is between 1 and 4
        # Return False if the input is an integer that doesn't fall within this range
        return 1 <= int(userInput) and int(userInput) <= 4
    # ValueError exception gets thrown if the input couldn't be turned into an int, for example, if the input is "2.5" or "hello"
    except ValueError:
        # In this case, also return False
        return False

# Get input from the user
characterClassInput = input("Input 1, 2, 3 or 4: ")

# If the input is ok, skip this part
# If the input is not ok, enter the loop and ask for input again
while not isValidCharacterClassInput(characterClassInput):
    print "You have not chosen a valid number. Please try again."
    characterClassInput = input("Input 1, 2, 3 or 4: ")

# We don't get here until the input is validated
print "You have chosen", characterClassInput

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

Answer 2

您可以在创建时将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方法。

Answer 3

你不能在这部分代码中应用你的风格：

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

如何将css添加到动态创建的表中

3 个答案: