Question

我有一个HTML＆amp; CSS组合如下

.panel-default.panel-custom {
    background: #05B9F0;
    color: white;
}
.headertext {
    text-align: center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
      <script>
        $(document).ready(function(){
          $("#getdata").click(function(){
            var foobar  = $("#partnumbers").val();
            var urlToCall = "http://127.0.0.1:3000/foo?bar="+foobar
              $.getJSON(urlToCall, function(data, status){
                var markup = '';
                $.each(data, function(index) {
                  var key = index;
                  var value = data[index];
                  markup = markup + '<tr><td class="col-md-3">"'+key+'</td><td class="col-md-9">'+value+'</td></tr>'
                })
                markup = markup + "</table>";
                $("#data").append(markup);
                $("#data").addClass("table table-striped table-hover")
                $("#data").show()
              });
          });
      });
      </script> 
      <div class="panel panel-default panel-custom">
              <h2 class="headertext">
                  Foo Bar Status
              </h3> 
      </div>
        <div id=input-group class="input-group">
          <input type="text" id=partnumbers class="form-control" placeholder="Part Numbers">
            <span class="input-group-btn">
              <button class="btn btn-default" id="getdata" type="button" >View Data</button>
            </span>
        </div>
        <br>
        <br>
          <table id="data" style="display:none" >
            <thead>
              <tr>
                <th>Description</th>
                <th>Status</th>
              </tr>
            </thead>
          </table>
    </body>

正如您所看到的，在添加我从数据生成的新标记后，我正在向我的表添加样式table table-striped table-hover。当我检查元素时，我可以看到该类应用于表，但在浏览器中，我无法看到table table-striped table-hover的效果。我在这里错过了什么？我从开发人员工具窗口复制了<body> div的全部内容，并将其放在静态HTML文件中。当我在浏览器中打开这个静态文件时，我能够看到样式。但不是当Node.js服务器提供页面时。这里有什么指示？

Answer 1

暂时应用解决方法。我没有从一开始就将表放在HTML主体中，而是在jQuery调用中生成了它并在那里应用了样式。这是我更新的javscript代码块。

＆＃13;

$(document).ready(function(){
          $("#getdata").click(function(){
            var foobar  = $("#partnumbers").val();
            var urlToCall = "http://127.0.0.1:3000/foo?barr="+foobar
              $.getJSON(urlToCall, function(data, status){
                var markup = '<table id="data" class="table table-striped table-hover" ><thead><tr><th>Description</th><th>Status</th></tr></thead>';
                $.each(data, function(index) {
                  var key = index;
                  var value = data[index];
                  markup = markup + '<tr><td class="col-md-3">"'+key+'</td><td class="col-md-9">'+value+'</td></tr>'
                })
                markup = markup + "</table>";
                $("#data").append(markup);
                $("#data").addClass("table table-striped table-hover")
                $("#data").show()
              });
          });
      });

＆＃13;

Bootstrap类不适用于动态添加的内容

1 个答案: