Bootstrap CSS не работает, когда я создаю DOM элементы динамически с помощью JQuery

<html> 
<head> 
<title>Bootstrap Grid</title> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<style type="text/css"> 

</style> 
</head> 
<body> 
<div class="container"> 
<div id="Output"></div> 
</div> 
<script> 

$(document).ready(function($) { 
    console.log('Document Ready'); 
    renderData(); 
    checkoutput(); 
}); 
function renderData() { 
     var obj = { 'players': [ 
      { 'fname': 'joe', 'lname': 'smith', 'number': '34' }, 
      { 'fname': 'jim', 'lname': 'jones', 'number': '12' }, 
      { 'fname': 'jack', 'lname': 'Hoff', 'number': '84' } 
      ] }; 

     var cols = GetHeaders(obj); 

     $('#Output').html(CreateTable(obj, cols)); 
} 



    function CreateTable(obj, cols) { 
     // below bootstrap table is not effective 
     var table = $('<table id="mytable" class="table table-bordered table-condensed table-striped table-hover"></table>'); 
     console.log('what is there' +table.text()); 
     var th = $('<tr></tr>'); 
     for (var i = 0; i < cols.length; i++) { 
      th.append('<th>' + cols[i] + '</th>'); 
     } 
     table.append(th); 

     for (var j = 0; j < obj.players.length; j++) { 
      var player = obj.players[j]; 
      var tr = $('<tr></tr>'); 
      for (var k = 0; k < cols.length; k++) { 
       var columnName = cols[k]; 
       tr.append('<td>' + player[columnName] + '</td>'); 
      } 
      table.append(tr); 
     } 
     return table; 
    } 

    function GetHeaders(obj) { 
     var cols = new Array(); 
     var p = obj.players[0]; 
     for (var key in p) { 
      cols.push(key); 
     } 
     return cols; 
    } 
    function checkoutput(){ 
    console.log('what is in the html'); 
    console.log($('#Output').html()); 
    } 

</script> 
</body> 
</html>

источник

2017-02-15 Raghu Prasad

есть вопросы? – chiliNUT

Вопрос - это класс начальной загрузки, такой как table-bordered, table-condensed и т. Д. Не работает .class = «таблица с таблицей-сгруппированной таблицей-полосатой таблицей-зависанием» –

<html> 
 
<head> 
 
<title>Bootstrap Grid</title> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<style type="text/css"> 
 

 
</style> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
<div id="Output"></div> 
 
</div> 
 
<script> 
 

 
$(document).ready(function($) { 
 
    console.log('Document Ready'); 
 
    renderData(); 
 
    checkoutput(); 
 
}); 
 
function renderData() { 
 
     var obj = { 'players': [ 
 
      { 'fname': 'joe', 'lname': 'smith', 'number': '34' }, 
 
      { 'fname': 'jim', 'lname': 'jones', 'number': '12' }, 
 
      { 'fname': 'jack', 'lname': 'Hoff', 'number': '84' } 
 
      ] }; 
 

 
     var cols = GetHeaders(obj); 
 

 
     $('#Output').html(CreateTable(obj, cols)); 
 
} 
 

 

 

 
    function CreateTable(obj, cols) { 
 
     // below bootstrap table is not effective 
 
     var table = $('<table id="mytable" class="table table-bordered table-condensed table-striped table-hover"></table>'); 
 
     console.log('what is there' +table.text()); 
 
     var th = $('<tr></tr>'); 
 
     for (var i = 0; i < cols.length; i++) { 
 
      th.append('<th>' + cols[i] + '</th>'); 
 
     } 
 
     table.append(th); 
 

 
     for (var j = 0; j < obj.players.length; j++) { 
 
      var player = obj.players[j]; 
 
      var tr = $('<tr></tr>'); 
 
      for (var k = 0; k < cols.length; k++) { 
 
       var columnName = cols[k]; 
 
       tr.append('<td>' + player[columnName] + '</td>'); 
 
      } 
 
      table.append(tr); 
 
     } 
 
     return table; 
 
    } 
 

 
    function GetHeaders(obj) { 
 
     var cols = new Array(); 
 
     var p = obj.players[0]; 
 
     for (var key in p) { 
 
      cols.push(key); 
 
     } 
 
     return cols; 
 
    } 
 
    function checkoutput(){ 
 
    console.log('what is in the html'); 
 
    console.log($('#Output').html()); 
 
    } 
 

 
</script> 
 
</body> 
 
</html>

Ваш самозагрузки КСС работает fine--

источник

2017-02-15 01:41:00 neophyte

class = "table-bounded table-condensed table- полосатый стол-зависание "- стол-граничный стол-сгущенный стол-полосатый стол-зависание не применяется .. Я пропускаю кое-что. –

Я получил ответ. Я добавил <tbody></tbody>. После этого добавляется весь класс начальной загрузки, связанный с выполнением таблицы.

class="table table-bordered table-condensed table-striped table-hover" 

var table = $('<table id="mytable" class="table table-bordered 
table-condensed table-striped table-hover"><tbody></tbody></table>');

источник

2017-02-15 09:17:13

Bootstrap CSS не работает, когда я создаю DOM элементы динамически с помощью JQuery

ответ

Смежные вопросы