Question

我正在尝试创建一个列和列的表格。将使用jquery从JSON创建行。问题是，正在创建表，但没有边框和＆amp; 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>

Answer 1

要达到预期效果，请使用以下

1.add id =“nonHeader”to tbody而不是tr

<tbody id="nonHeader">

</tbody>

添加bootstrap类table-border

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

使用jquery时，Bootstrap无法正常工作

1 个答案: