jquery – 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);
.   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);
.   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,188);
.   text-shadow: none;
.   vertical-align: middle;
.   width: 30px;

我相信它可能与某些事情有关
https://productforums.google.com/forum/#!topic/chrome/U5wefygGAow