Bootstrap不工作，而使用jquery

-3

我想創建一個表，其中列&行將從JSON使用jQuery創建。問題是，表正在創建，但沒有邊界& bootstrap正在爲但在其中工作。我不確定，因爲我是新的JQuery，有什麼問題??我想要一個邊框和引導程序爲整桌工作。Bootstrap不工作，而使用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

你有沒有包含這樣引導urces？ –

爲了達到預期的效果，請使用以下

1.新增ID = 「nonHeader」到TBODY，而不是TR

<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

Bootstrap不工作，而使用jquery

回答

相關問題