使用 jquery 时引导程序不起作用答案

【问题标题】：Bootstrap is not working while using jquery使用 jquery 时引导程序不起作用
【发布时间】：2016-08-22 14:41:31
【问题描述】：

我正在尝试创建一个表，该表将使用 jquery 从 JSON 创建列和行。问题是，正在创建表，但没有边框和引导程序正在工作，但它不能工作。我不确定，因为我是 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>

【问题讨论】：

您是否包含引导源？

标签： javascript jquery twitter-bootstrap

【解决方案1】：

要达到预期的效果，请在下面使用

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

【讨论】：