CODEWITHSUNDEEP
javascriptcss
CodeMonkey
CodeMonkey

Reputation: 2285

Adding Table styling in Javascript

I am creating a table dynamically in javascript. Also i am suing some css code to format the tables. However, my code is not picking up any formatting. Not even the simplest ones like adding a border around table. Here is my code :

function parseRequest_ls(response) {
    document.getElementById("files").innerHTML += "<table border='2'>";

    for(var i=0;i<5;i++){
        if(response.data[i].type == "folder" || response.data[i].type == "album") {
            document.getElementById("files").innerHTML += "<tr><td><b>+</b> <a href='#'>"+ response.data[i].name + "</a></td></tr>";
        }
    }
    document.getElementById("files").innerHTML += "</ul></table></div>";
}

CSS Code:

table, th, td {
    border: 2px solid;
    border-collapse: collapse;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #555;
}

caption {
    font-size: 150%;
    font-weight: bold;
    margin: 5px;
}

td, th {
    padding: 4px;
}

Upvotes: 0

Views: 1292

Answers (3)

CodeMonkey
CodeMonkey

Reputation: 2285

So the issue was, i can not create table via innerHTML. I had to do it using DOM Object. I created a DOM object and then, createElement to get the table. a bit not straight forward.. but it worked.. thanks all for your suggestions though. :)

Upvotes: -1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324610

Don't use += with innerHTML. First build a string in a temporary variable, and then once you have some complete (and valid) HTML in your string, you can use += to append it to an element.

Upvotes: 1

The Alpha
The Alpha

Reputation: 146191

In your function you have

document.getElementById("files").innerHTML += "<table border='2'>"; // first line

and

document.getElementById("files").innerHTML += "</ul></table></div>"; // last line

You have placed a closing ul tag </ul> and a closing div tag </div> at the last line but didn't use any starting tag for either ul and div so the HTML is broken and I think you should not use an ul inside a table without wrapping it inside a td. So in this case you can use

function parseRequest_ls(response) {
    var trs='';    
    for(var i=0;i<5;i++){
        if(response.data[i].type == "folder" || response.data[i].type == "album") {
            trs +="<tr><td><b>+</b> <a href='#'>"+ response.data[i].name + "</a></td></tr>";
        }
    }
    document.getElementById("files").innerHTML += "<table border='2'>"+trs+"</table>";
}

A simple example.

Upvotes: 2

Related Questions