Using javaScript to create table and add style to it

Question

Could anyone tell me why the below code does not work to add a border to the table that I am creating. Thanks

<html>
   <head>
    <title>Exam5 review</title>
    <style type="text/css">
        table.center
            {
                border: 1px;
                background-color: green;
                width: 500px;
                text-align: center;
                margin-left:auto; 
                margin-right:auto;
            }
    </style>
    <script type="text/javascript">
        function parse()
        {
            document.open();
            document.write('<table class="center">');
            document.write('<tr><th>Course</th><th>Enrollment</th></tr>');
            document.write("</table>");
        }
        </script>
</head>
<body onload="parse();">
</body>
</html>

dfsq · Accepted Answer · 2014-10-23 12:27:54Z

1). Explanation. It doesn't work because document.write (to be exact document.open) completely overwrites the whole document structure when you insert the table. So your styles are wiped out. So don't use document.write ever at all. There are just a very few situations when you want to use it, and this one is not one of them.

Here is what documentations says on document.open:

If a document exists in the target, this method clears it.

2). Correct approach. If you want to insert some chunk of HTML use super cool and underestimated insertAdjacentHTML method:

function parse() {
    var table = 
        '<table class="center">' +
            '<tr>' + 
                '<th>Course</th><th>Enrollment</th>' +
            '</tr>' + 
        '</table>';
    document.body.insertAdjacentHTML('beforeend', table);
}

parse();

3). Border style. Once the table in rendered you will find out that it's not enough to write border: 1px; to set a table border. You are missing color and border style definitions. It should be:

border: 1px #AAA solid;

Documentation on border property.

Demo: http://jsfiddle.net/8h7tw244/

mt_xing · Accepted Answer · 2014-10-23 12:23:24Z

0

Per MDN, document.open will clear a document before opening it for writing. https://developer.mozilla.org/en-US/docs/Web/API/document.open

You could try something like:

document.getElementsByTagName("BODY")[0].innerHTML += "<table></table>"

Replace the Tables with whatever you needed. That should work.

answered Oct 23, 2014 at 12:23

mt_xing

6847 silver badges24 bronze badges

Comments

Fabio Manzo · Accepted Answer · 2014-10-23 12:23:56Z

0

You Body tag should be before the head tag. Write the table through javascript in a container.

<html>  
<body>
<head>
<title>Exam5 review</title> 
<style>
.center{
border: 1px solid red;
background-color: green;
width: 500px;
text-align: center;
margin-left:auto; 
margin-right:auto;
}
</style>
</head>
<div id="container">
</div>
<script type = "text/javascript">
function parse()
{
var cont= document.getElementById("container");
cont.innerHTML = '<table class= "center" > <tr><th>Course</th><th>Enrollment</th></tr></table>';
}parse();
</script>
</body>
</html>

answered Oct 23, 2014 at 12:23

Fabio Manzo

366 bronze badges

Comments

Waqas Ghouri · Accepted Answer · 2014-10-23 12:24:25Z

0

    <script type = "text/javascript">
        function parse()
        {
            var html = '<table class="center"><tr><th>Cource</th><th>Enrollment</th></tr></table>';
            appendHtml(document.body, html); // "body" has two more children - h1 and span.

        }

        function appendHtml(el, str) {
          var div = document.createElement('div');
          div.innerHTML = str;
          while (div.children.length > 0) {
            el.appendChild(div.children[0]);
          }
        }


        </script>

</head>
<body onload="parse();">
</body>

answered Oct 23, 2014 at 12:24

Waqas Ghouri

1,1502 gold badges18 silver badges37 bronze badges

Comments

Andi · Accepted Answer · 2014-10-23 12:25:18Z

As already mentioned you should avoid using document.open. Better use this js snippet:

document.body.innerHTML += '<table class= "center" ><tr><th>Course</th><th>Enrollment</th></tr></table>';

In your document it should look like: (JsFiddle for demo)

<html>
   <head>
    <title>Exam5 review</title>
    <style type="text/css">
        table.center
            {
                border: 1px;
                background-color: green;
                width: 500px;
                text-align: center;
                margin-left:auto; 
                margin-right:auto;
            }
    </style>
    <script type="text/javascript">
        document.body.innerHTML += '<table class= "center" ><tr><th>Course</th><th>Enrollment</th></tr></table>';
    </script>
</head>
<body>
</body>
</html>

Collectives™ on Stack Overflow

Using javaScript to create table and add style to it

5 Answers 5

Demo: http://jsfiddle.net/8h7tw244/

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Demo: http://jsfiddle.net/8h7tw244/

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related