How to create two Tables in JavaScript and use with different CSS?


Tags: html,css,table

Problem :

I need to create two tables. Both tables are created in JScript, Because they need to be created dynamically. I know when you make two html tables, you can separate them by assigning a tag as follows:

table.table1 {...}
table.table1 tr {...}
table.table1 td {...}

table.table2 {...}
table.table2 tr {...}
table.table2 td {...}

But in my jScript, i created the first table as follows:

function makeCells() {
    var t = document.createElement("TABLE");

    for (var rows = 0; rows < 8; rows++) {
        var newRow = document.createElement("TR");
        console.log(newRow);
        t.appendChild(newRow);
        for (var cols = 0; cols < 8; cols++) {
            var newCell = document.createElement("TD");
            newRow.appendChild(newCell);
        }
    }
    document.body.appendChild(t);
}

So how would i go about creating two tables with different names/tags so i can then use them with two different CSS statements?

Thank You for Your time



Solution :

How about...

function createTable(className) {
  var t = document.createElement("TABLE");
  t.className = className || "";

  for (var rows = 0; rows < 8; rows++) {
    var newRow = document.createElement("TR");
    console.log(newRow);
    t.appendChild(newRow);
    for (var cols = 0; cols < 8; cols++) {
        var newCell = document.createElement("TD");
        newRow.appendChild(newCell);
    }
  }
  document.body.appendChild(t); 
}

createTable("table1");
createTable("table2");

As a side note, if you're not aware, most modern browsers feature some sort of Dev Tools - hit F12 in Chrome, IE or Firefox, and it should pop up. Within each there is a 'Console' section, (Esc in Chrome) and you can not only execute javascript but browse the available functions and properties. To answer your question, I opened up Chrome's dev tools and did:

var t = document.createElement("TABLE");
t.     // <-- browsed the list of available properties of t, found className and classList
t.className = "table1";
t      // Output: <table class="table1"></table>

I added this in the hopes that you will come away with the knowledge of how to see what is available to you and not just memorization of ".className" :-P


    CSS Howto..

    Displaying XML using CSS: How to handle  ?

    how to show the hidden div with same properties css with jquery

    TUMBLR CSS - How to move the caption on the permalink page to the right of the image

    CSS border - how to populate content inside div with border

    How to turn on Visual Studio 2008 .css Intellisense on .less file

    How to access parent element in CSS? [duplicate]

    How can I know if I am clicking on a transparent or non-transparent part of a png on a web page?

    How to use CSS to vertically center a form in a div

    How do I make text-transform:uppercase work properly with Greek?

    How do i vertically align my form in bootstrap?

    How to show a title in the border of a div [duplicate]

    How to reset margin-bottom to its default value

    CSS how to show menu sub li when menu has position fixed

    How can I remove a parent with a certain child inside of it (media queries)

    How do you create slidedown effects like this?

    How to disable mask on selected image in the f/ckeditor in webkit, opera browsers?

    How to expand link on hoover? Add “<” “>” symbols around link?

    How to edit CSS file in Objective-C

    How to make a GWT-like CaptionPanel manually

    How to apply custom CSS to Angular Material md-contact-chips

    How to style the arrow that opens submenus in jQuery mmenu?

    How do I keep an element scaled in CSS3 in-till mouseleave? Then on mouseleave scale the element back to it's original size

    How do I add a link to my CSS background?

    How do I use this CSS animation in my HTML file?

    How to insert javascript function in css link tag

    How to have a hidable paragraph in an HTML email template

    How can I show an attribute as text with CSS?

    How to fix image loading time with my image slider?

    CSS: How to move text link to the right inside li

    How to Use jquery Animate() with .slideToggle() Between Two Classes