Question

以下代码将json文件加载到我的应用程序中以填充一些表数据。它完成了工作。

function init_main () {
    $('html').hide().fadeIn('slow');

    // popuate from index.json
    var json = $.getJSON(chrome.extension.getURL('js/index.json'), function(json) {
        // CREATE SETTINGS TABLE WITH GIVEN INDEX
        for (var property in json) {
            var table = $('<table></table>').addClass('table');
            var header = $('<thead></thead>').addClass('thead-inverse');
            var head_r = $('<tr></tr>');
            var h1 = $('<th></th>').text(property);
            var h2 = $('<th></th>').text('check to remove: ');
            head_r.append(h1);
            head_r.append(h2);
            header.append(head_r);
            table.append(header);
            var body = $('<tbody></tbody>');
            table.append(body);
            for (var tag in json[property]) {
                var body_r = $('<tr></tr>');
                var d1 = $('<td></td>').text(tag);
                var d2 = $('<td></td>')     // maybe change to class?
                $('<input />', { type: 'checkbox', id: tag}).appendTo(d2);
                body_r.append(d1);
                body_r.append(d2);
                body.append(body_r);
            }
            $('#tableWrap').append(table);
        }
    });
}

//bind events to dom elements
document.addEventListener('DOMContentLoaded', init_main);

然而，与我的其他html标记不同，只有这些元素不会使用引导程序库来改变我的CSS 。所有其他html标记成功使用引导库。

我试过在回调之外移动代码没有运气。控制台没有错误。

有没有人知道为什么bootstrap在上面的代码片段中不会生效？我认为这与页面加载有关但到目前为止我还没有看到window.onPageLoad的任何成功（）

以下是我在html中导入的脚本以供参考：

<html>
    <head>
        <!-- load stylesheets: Bootstrap v2.3.0 - http://twitter.github.com/bootstrap/index.html -->
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"></link>

        <!-- load javascript: jQuery 1.9.1 - http://jquery.com/ -->
        <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>

        <!-- load javascript: Bootstrap v2.3.0 - http://twitter.github.com/bootstrap/ -->
        <script type="text/javascript" src="../js/bootstrap.min.js"></script>

        <!-- load stylesheets: internal -->
        <link rel="stylesheet" type="text/css" href="../css/global.css"></link>
        <link rel="stylesheet" type="text/css" href="../css/main.css"></link>
    </head>
    <body>  
        <div class="navbar">
        <div class="navbar-inner">
            <a id="home" id="active" class="brand" href="#">
            <!-- UNCOMMENT THE CSS VALUES TO TEST OTHER DIMENTIONS -->
            <img src="../images/icon.png" alt=""> 
            <span class="icon-bar"></span>
            Fluff 1.0
            </a>
            <a id="settings" class ="brand" href="#" >
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            Settings</a>
            <a id="run" class ="brand" href="#" >
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            Run</a>
        </div>
        </div>
        <div id="outer">
            <!-- Main Page -->
            <div id="main-inner">
                <div id="main-title"> Fluff 1.0 </div>
                <div id="textblock">Donate or contact block here</div>
            </div>
            <!-- Settings Page -->
            <div id="settings-inner">
                <h5 id="directions"> <span></span> Select Tags to Remove from Automated Browser Queries </h5>
                <div id="tableWrap">

                </div>
            </div>
            <!-- Run Page -->
            <div id="run-inner">
                <table class='table'>
                    <thead>
                        <tr>
                            <td> 1 </td>
                            <td> 2</td>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

        <!-- load javascript: unique html page javascript file -->
        <script type="text/javascript" src="../js/main.js"></script>
    </body>

编辑： sample.json - 'num'键与任何问题或代码无关

{
    "sex": {
        "M":{   
                "num":13,
            },
        "F": {
                "num":13,
            },
        "T": {
                "num":0
        }
    },
    "politics": {
        "L": {  
                "num":10,
            },
        "R": {
                "num":10,
        }
    },
    "race": {
        "AMI":{
                "num":6,
        },
        "ASI":{
                "num":7,
        },
        "AFA":{
                "num":7,
        },
        "PCI":{
                "num":0
        },
        "WHT":{
                "num":2,
                "3":"-"
        },
        "HSP":{
                "num":5,
                "6":"-"
        },
        "MDE":{
                "num":6,
        }
    },
    "orientation": {
        "STR": {
                "num":0
        },
        "GAY": {
                "num":0
        },
        "OTH": {
                "num":0
        }
    },
    "interests": {
        "GARD":{
                "num":4,
        },
        "NHL":{
                "num":1,
        },
        "NBA":{
                "num":1,
        },
        "TECH":{
                "num":0
        }
    }
}

Answer 1

我不完全理解你的问题，但是我把你的样本放在jsfiddle中，删除了一些无用的html文件，使其易于阅读，这很有效。只有错误的代码是var json = $.getJSON。你为什么这么做？但是你没有任何返回值，如果是，它永远不会在像get这样的异步函数中工作。第二个问题是你从不打电话给你的功能!!

请参阅此代码并与我分享您的想法：

jsfiddle

Answer 2

通过在html

中将div id='tableWrap'更改为table id='tableWrap'来解决此问题

表格内的表格......

bootstrap不使用jquery动态创建的元素进行渲染

2 个答案: