<style>
#main{
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
</style>
<div id="main">
Welcome
</div>
在这里,我给了一个id到div元素,它的应用相关的CSS它.
要么
<style>
.main{
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
</style>
<div class="main">
Welcome
</div>
现在,这里我给class的div,它也做同样的工作对我来说.
那么Id和类之间的确切区别是什么？id我应该何时使用以及何时应该使用class.？我是CSS和网页设计的新手,在处理这个问题时有点困惑.
我想为一个Pandas Dataframe定义一个css id来使用javascript dataTables进行渲染.可能吗？
有了这个:
pandas.DataFrame([[1, 2], [3, 4]]).to_html()
我明白了:
'<table border="1" class="dataframe">\n <thead>\n <tr style="text-align: right;">\n <th></th>\n <th>0</th>\n <th>1</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th>0</th>\n <td>1</td>\n <td>2</td>\n </tr>\n <tr>\n <th>1</th>\n <td>3</td>\n <td>4</td>\n </tr>\n </tbody>\n</table>'
但是我想得到一个css id,就像这样:
'<table border="1" id='mytable' class="dataframe">\n <thead>\n <tr style="text-align: right;">\n <th></th>\n <th>0</th>\n <th>1</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th>0</th>\n <td>1</td>\n <td>2</td>\n </tr>\n <tr>\n <th>1</th>\n <td>3</td>\n <td>4</td>\n </tr>\n </tbody>\n</table>'
要在我的html页面中使用dataTable:
$(document).ready(function() {
$('#mytable').DataTable();
});
我想显示一个表-这是一个熊猫数据框-作为数据表。在下面的简化示例中，我读取了用户提供的两个数字，这些数字确定了表的行号和列号。然后可以正确显示该表的元素数，但是，该表没有出现。
我认为问题在于我以错误的方式传递了表格。当我尝试
return jsonify(number_elements=a * b,
my_table=df)
我得到错误
anaconda2 / lib / python2.7 / json / encoder.py“，第184行，默认情况下引发TypeError（repr（o）+”不是JSON可序列化“）
TypeError：0 1 2 3 0 51 35 10 84 1 30 60 79 24不可序列化JSON
如果我用
return jsonify(number_elements=a * b,
my_table=df.to_json())
则没有错误，但表格仍未显示。
我将如何正确执行此操作？
我的index.html文件如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"
rel="stylesheet">
<script type=text/javascript>
$(function() {
$('a#calculate').bind('click', function() {
$.getJSON('/_get_table', {
a: $('input[name="a"]').val(),
b: $('input[name="b"]').val()
}, function(data) {
$("#elements").text(data.number_elements);
$("#a_nice_table").DataTable(data.my_table);
});
return false;
});
}); …