부트 스트랩 CSS가 작동하지 않습니다

<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

질문은 테이블 경계, 테이블 응축 등의 부트 스트랩 클래스입니다. 작동하지 않습니다 .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>

귀하의 부트 스트랩 CSS는 노력 fine--

출처

2017-02-15 01:41:00 neophyte

class = "테이블 테이블 경계의 테이블 응축 테이블 줄무늬 표 호버 "- 표 테두리가있는 표 압축 표 스트라이프 표 호버가 적용되지 않습니다. –

알았어. 대답. <tbody></tbody>10을 추가했습니다. 그 후 모든 부트 스트랩 클래스가 테이블 실행과 관련하여 추가되었습니다 ..

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

부트 스트랩 CSS가 작동하지 않습니다

답변

관련 문제