5
我有一個html渲染問題，原來我是從模擬載入數據，它看起來像這樣。圖標和html中的文本沒有被渲染
當我註釋掉了模擬數據我的網頁是不是渲染的所有元素正確
，如果我的鼠標在一個元素也使得它
添加代碼如果我在空行添加<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>Task</th>
</tr>
</thead>
<tbody id="todoListTasksHome">
<tr></tr>
<tr id="task_1">
<td style="width:64px"><button class="btn btn-minier btn-green" onclick="completeTask(1)">complete</button></td>
<td>description</td>
</tr>
</tbody>
</table>
</div>
它的工作原理
使代碼在模擬數據，增加了爲
var load_todo_list_tasks = function() {
var loadedData = [
{
"comment": "",
"task": "Go see a chiro",
"task_id": 123,
"completed": false,
"completed_date": "",
"set_date":"07/08/13"
}];
if (loadedData.length>0){
$("#tasks_completed").hide();
$("#tasks_home_completed").hide();
numberTasksForToday=0;
for (var i = 0; i < loadedData.length; i++) {
var data = loadedData[i];
numberTasksForToday++;
displayTodoListTask(data);
}
}
};
var displayTodoListTask = function (data) {
var checked = "";
if (data['completed'] === false) {
var completedStyle = "style=\"display:none\"";
var taskStyle = "";
} else {
var completedStyle = "";
var taskStyle = "style=\"display:none\"";
}
if (data['completed_date'] == "") {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
data['completed_date'] = (day < 10 ? '0' : '') + day + '/' +
(month < 10 ? '0' : '') + month + '/' +
String(d.getFullYear()).substring(2, 4);
}
var html =
"<tr id=\"task_" + data['task_id'] + "\" " + taskStyle + ">" +
"<td style=\"width:64px\"><button class=\"btn btn-minier btn-green\" onclick=\"completeTask(" + data['task_id'] + ")\">complete</button></td>" +
"<td>" + data['task'] + "</td>" +
"</tr>";
$("#todoListTasks").prepend(html);
var html =
"<tr id=\"task_home_" + data['task_id'] + "\" " + taskStyle + ">" +
"<td style=\"width:64px\"><button class=\"btn btn-minier btn-green\" onclick=\"completeTask(" + data['task_id'] + ")\">complete</button></td>" +
"<td>" + data['task'] + "</td>" +
"</tr>";
$("#todoListTasksHome").prepend(html);
};
我不知道如何去調試它，因爲沒有控制檯日誌中有錯誤，有什麼想法？
更新
<li class="active" onclick="showHome()" id="menu_home">
<a href="#">
<i class="icon-home"></i>
<span class="menu-text"> Home </span>
</a>
</li>
. background-color: rgb(255, 255, 255);
. border-bottom-color: rgb(229, 229, 229);
. border-bottom-style: solid;
. border-bottom-width: 1px;
. border-image-outset: 0px;
. border-image-repeat: stretch;
. border-image-slice: 100%;
. border-image-source: none;
. border-image-width: 1;
. border-left-color: rgb(57, 57, 57);
. border-left-style: none;
. border-left-width: 0px;
. border-right-color: rgb(57, 57, 57);
. border-right-style: none;
. border-right-width: 0px;
. border-top-color: rgb(252, 252, 252);
. border-top-style: solid;
. border-top-width: 1px;
. box-sizing: border-box;
. color: rgb(57, 57, 57);
. display: block;
. font-family: 'Open Sans';
. font-size: 13px;
. height: 40px;
. line-height: 19.5px;
. list-style-image: none;
. list-style-position: outside;
. list-style-type: none;
. margin-bottom: 0px;
. margin-left: 0px;
. margin-right: 0px;
. margin-top: 0px;
. padding-bottom: 0px;
. padding-left: 0px;
. padding-right: 0px;
. padding-top: 0px;
. position: relative;
. text-align: left;
. width: 42px;
的主頁圖標
. -webkit-font-smoothing: antialiased;
. background-image: none;
. background-position: 0% 0%;
. background-repeat: repeat;
. box-sizing: border-box;
. color: rgb(43, 125, 188);
. cursor: auto;
. display: inline-block;
. font-family: FontAwesome;
. font-size: 18px;
. font-style: normal;
. font-weight: normal;
. height: 36px;
. line-height: 36px;
. list-style-image: none;
. list-style-position: outside;
. list-style-type: none;
. margin-right: 2px;
. margin-top: 0px;
. min-width: 30px;
. text-align: center;
. text-decoration: none solid rgb(43, 125, 188);
. text-shadow: none;
. vertical-align: middle;
. width: 30px;
我相信它可能有一些做 https://productforums.google.com/forum/#!topic/chrome/U5wefygGAow
只是一個方面的說明，你不需要第二次寫'var html'，因爲它已經被聲明瞭，你可以簡單地寫'html = ...'。 –
你能分享演示嗎？ –
請向我們展示HTML和CSS代碼。 – TylerH