jqueryの使用中にブートストラップが機能しない

-3

jqueryを使用してJSONから列&が作成されるテーブルを作成しようとしています。問題は、テーブルは作成されていますが、境界線がありません&ブートストラップは動作していますが、そのためには動作しません。新しいものはJQueryであるのか分かりませんか？テーブル全体で働くこと。jqueryの使用中にブートストラップが機能しない

私のコードは次のとおりです。

<body> 
    <table id="tableId" class="table table-striped"> 
    <thead> 
     <tr id="header"> 

      </tr> 
    </thead> 

    <tbody> 
     <tr id="nonHeader"> 

     </tr> 
    </tbody> 
    </table>

<script> 
var tableData=[ 
    { 
     firstHeader: "Id", 
     secondHeader: "First Name", 
     thirdHeader: "Last Name", 
     fourthHeader: "Father's Name", 
     fifthHeader:"Value" 
    }, 
    { 
     id: 1, 
     firstName: "Peter", 
     lastName: "Jhons", 
     fatherName: "fons", 
     value:1 
    }, 
    { 
     id: 2, 
     firstName: "David", 
     lastName: "Bowie", 
     fatherName: "kons", 
     value:2 
    }, 
    { 
     id: 3, 
     firstName: "kevin", 
     lastName: "Bowie", 
     fatherName: "mons", 
     value:3 
    } 
] 
function drawTable(data) { 
    for (var i = 0; i < data.length; i++) { 
     if(i==0){ 
      drawHeader(data[i]) 
     } 

     else{ 
      drawRow(data[i]); 
     } 


    } 
} 

function drawHeader(rowData){ 
    var row = $("<tr/>") 
    $("#nonHeader").append(row); 
    for (var key in rowData) { 
     if (rowData.hasOwnProperty(key)) { 
      row.append($("<th>" + rowData[key] + "</th>")); 

     } 
    } 
} 

function drawRow(rowData) { 
    var row = $("<tr/>") 
    $("#nonHeader").append(row); 

    for (var key in rowData) { 
     if (rowData.hasOwnProperty(key)) { 

      console.log(rowData[key]); 
      row.append($("<td>" + rowData[key] + "</td>")); 
      console.log(key + " -> " + rowData[key]); 
     } 
    } 
} 
drawTable(tableData); 

</script>

出典

2016-08-22 ishmam shahriar

あなたはそう、ブートストラップが含まれていますうつ病？ –

ではなく、TRのTBODYする

1.addのID = "nonHeader" の下に使用し、期待される結果を達成するために

<tbody id="nonHeader"> 

</tbody>

HTMLブートストラップクラステーブルボーダーを追加します。

<body> 
    <table id="tableId" class="table table-bordered"> 
    <thead> 
     <tr id="header"> 

      </tr> 
    </thead> 

    <tbody id="nonHeader"> 

    </tbody> 
    </table>

JS：

var tableData=[ 
    { 
     firstHeader: "Id", 
     secondHeader: "First Name", 
     thirdHeader: "Last Name", 
     fourthHeader: "Father's Name", 
     fifthHeader:"Value" 
    }, 
    { 
     id: 1, 
     firstName: "Peter", 
     lastName: "Jhons", 
     fatherName: "fons", 
     value:1 
    }, 
    { 
     id: 2, 
     firstName: "David", 
     lastName: "Bowie", 
     fatherName: "kons", 
     value:2 
    }, 
    { 
     id: 3, 
     firstName: "kevin", 
     lastName: "Bowie", 
     fatherName: "mons", 
     value:3 
    } 
] 
function drawTable(data) { 
    for (var i = 0; i < data.length; i++) { 
     if(i==0){ 
      drawHeader(data[i]) 
     } 

     else{ 
      drawRow(data[i]); 
     } 


    } 
} 

function drawHeader(rowData){ 
    console.log("Data rowwwww") 
    console.log(rowData); 




    for (var key in rowData) { 
     var row = $("<th/>") 
     $("#header").append(row); 

     if (rowData.hasOwnProperty(key)) { 
      row.append($("<th>" + rowData[key] + "</th>")); 
      console.log(key + " -> " + rowData[key]); 
     } 
    } 
} 

function drawRow(rowData) { 

    var row = $("<tr/>") 
    $("#nonHeader").append(row); 

    for (var key in rowData) { 





     if (rowData.hasOwnProperty(key)) { 

      console.log(rowData[key]); 
      row.append($("<td>" + rowData[key] + "</td>")); 
      console.log(key + " -> " + rowData[key]); 
     } 
    } 


} 
drawTable(tableData);

http://codepen.io/nagasai/pen/pbmRJa

出典

2016-08-22 14:49:08

jqueryの使用中にブートストラップが機能しない

答えて

関連する問題