How to id dom table so I can position it on page?


Tags: javascript,html,asp.net,css

Problem :

Picture of tablesI am new to creating tables with js and started with using document.write. That was writing over my html so now I am using dom elements. How can I id the group of tables so I can position it in my css? I am a little confused how because my code creates multiple tables with the loop. I would just like to position them all as one. The picture shows what they look like but they just default to the bottom/left of my page. Also would appreciate any other code suggestions since I am new at this! Thanks!

   <script type="text/javascript">
    BuildTable();

    function BuildTable() {
        var myUrl = window.location.href;
        PageMethods.DoStuff(myUrl, onSucess, onError);
        function onSucess(result) {

            for (var i = 0; i < result.length; i++) {

                var body = document.getElementsByTagName("body")[0];

                var tbl = document.createElement("table");
                var tblBody = document.createElement("tbody");

                    var row = document.createElement("tr");
                    var cell = document.createElement("td");
                    var cellText = document.createTextNode('Community: ' + result[i].apartName);
                    cell.appendChild(cellText);
                    row.appendChild(cell);
                    tblBody.appendChild(row);

                    row = document.createElement("tr");
                    cell = document.createElement("td");
                    cellText = document.createTextNode('Address: ' + result[i].address + ', ' + result[i].city);
                    cell.appendChild(cellText);
                    row.appendChild(cell);
                    tblBody.appendChild(row);

                tbl.appendChild(tblBody);
                body.appendChild(tbl);
                tbl.setAttribute("border", "1");
                var space = document.createElement("br");
                body.appendChild(space);
            }
            }

        function onError(result) {
            alert('Something wrong.');
        }
    }

 </script>


Solution :

To set the id:

tbl.setAttribute('id', thisTablesId );

But probably what you want is to set the class attribute instead. Those don't need to be unique. You can change the css styles (for positioning) of all tables with the same class at once. Or if you need to programmatically determine the styling, you can use that attribute to determine whether or not this is one of the elements you wanted.

tbl.setAttribute('class', 'built-table' );

In your css stylesheet you can define what the built-table class will include using the .built-table selector.


    CSS Howto..

    Inheriting CSS how do I stop it?

    How to put JavaScript from tutorial into my website?

    How to style a button's font in CSS?

    How do I make effect like this on image hover?

    how to make an odd shaped html/css menu?

    How to Protect an HTML element from it's respective assigned CSS

    How to make CSS menu stay on top

    How to vertically align text over an image

    How to give style (image) for browse button in CSS?

    How to right align a div containing a form in another div?

    CSS: How to align vertically a “label” and “input” inside a “div”?

    CSS - want to remove a blank space but have no idea how to get rid of it?

    I can't figure out how to get display property to work when it comes to multiple div elements

    How to decrease CSS opacity

    JavaScript -Change CSS color for 5 seconds - How to add easing effect?

    How to style a GtkLabel with CSS?

    How to debug the different behavior of the same browser on the different platforms?

    How do I chain an infinite css animation to a one-time css animation?

    How to make better CSS ID rules

    CSS question: How to fix several rendering issues on http://www.fareham.ac.uk

    How to use a custom Style Sheet in WordPress

    Contact page Design how to add Bootstrap

    How to change image css after rotating it in JS?

    How to create pentagon shape for avatar image?

    How to make 2 level scrolling tab in CSS like this in HTML 5

    How to use the Javascript to add/remove the CSS/colour style to the html page?

    How do I customise the style of the Auth0 lock control?

    How do I make a table show a vertical scroll bar without explicitly setting the height?

    Firebug shows 404 error for claro_rtl.css, but I can't find the source that is trying to reference that file

    How to output element.style.marginTop using digits only?