Adding Table styling in Javascript

Question

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;
}

It's probably because your html isn't valid. You can't place a ul directly inside a table element. It must be in a td. More to the point where did the ul come from, you don't create the starting tag in that piece of script. Nor do you open the div tag you're closing. — JConstantine
– JConstantine, Commented Aug 5, 2012 at 19:00
Your HTML is most likely dismissed because you are adding it piece by piece and it's invalid until the last piece. And as JLevett says, your HTML is deeply broken. You have stray closing tags all over the place — Pekka
– Pekka, Commented Aug 5, 2012 at 19:11

The Alpha · Accepted Answer · 2012-08-05 20:21:25Z

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.

Niet the Dark Absol · Accepted Answer · 2012-08-05 20:24:39Z

1

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.

answered Aug 5, 2012 at 20:24

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Comments

CodeMonkey · Accepted Answer · 2012-08-06 04:09:53Z

-1

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. :)

answered Aug 6, 2012 at 4:09

CodeMonkey

2,3059 gold badges50 silver badges97 bronze badges

Collectives™ on Stack Overflow

Adding Table styling in Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related