ishmam shahriar ishmam shahriar - 3 months ago 9
jQuery Question

Bootstrap is not working while using jquery

I am trying to create a table which column & row will be created from JSON using jquery. The problem is,table is being created but there is no border & bootstrap is working for in but its not working for in .I am not sure as i am new is JQuery, what is the problem??.I want a border and bootstrap to be worked for whole table.

My code is:

<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

To achieve expected result, use below

1.add id="nonHeader" to tbody instead of tr

<tbody id="nonHeader">

</tbody>
  1. add bootstrap class 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