Large 5000 cell Grid using css, javascript and xhtml

I need to create a large grid with approx. 5,000 cells (10x10px). each cell needs its own ID, has to be clickable. cells that have been clicked need to be shaded differently. I also have to have a background image which needs to remain visible.

This is wrecking my head as the HTML overhead creating 5000 div tags is simply too much. W开发者_运维问答e thought of dynamically creating the div tags using JavaScript on the client side but don't know how to incorporate the list of clicked (differently shaded) cells.

Is there anything we haven't thought of?

Markus

---

Are you sure you don't want <canvas>?

If you are going to generate grid in Javascript, then my advices would be:

1) Don't manipulate DOM in a loop—it will be extremely slow.

2) Don't use string concatenation a-la out += '<div id="' + i + '"></div>'; This will also be slow. The best way is to push fragments into array and then join.

3) Wrap the cells into some container before inserting into DOM: inserting one element with lots of children is faster than inserting lots of unwrapped DIVs.

4) Use inline-block for positioning of cell divs. Floats will take significant time for recalculation on insert.

5) Don't bind click handler to each cell individually. Use jQuery .delegate() on the parent.

6) Don't forget rgba() in CSS, this way you can easily have your background visible

See http://kod.as/lab/grid/ for the my PoC implementation.

---

Your javascript solution can definitely work. I would personally use jQuery and do it like this:

1. Create the elements, each with a different id but all with the same class.
2. Bind a click event to all of the elements
3. in your click handler, you can add a class, such as clicked, to the originating element.
4. Then, you can get a list of the clicked elements by using jQuery to select everything with a clicked class.

Alternatively, you could generate the html server side with PHP or another server side language.

I highly recommend against typing 5,000 divs by hand. If you do this and then you need to change something, you're making 5,000 changes, which is bad news.

It should be relatively straightforward to implement especially if you're using jQuery.

---

My previous project has similar challenge. I need to generate a table with 50K rows of data.

My experience told me:

1) Do not generate the entire HTML code in your server. it will kill your server.

2) If using JS, Do not use DOM to create. It will kill the browser.

3) If using JS, use the primitive way to create the HTML code. e.g. myDom.innerHTML = 'Cell-1 ... Cell-1000';

4) In some case, you cannot put everything to the DOM at once. It will kill the memory too. Better to append blocks of data. (e.g. myDom.innerHTML += next1000RowOfData; myDom.innerHTML+= another10000RowOfData;

5) for your event. If it is just changing the color..etc. Then I suggest you to use CSS and use the a:hover property. If it will trigger something else (e.g. a server call or do some functions), then What I suggest is. Do the rendering first. Then attach the event later by using the DOM id. Remember... rendering takes most of the resources.

Test it out with different approach and wee which one works. But remember, the simpler the structure is, the better the performance will be.

---

Use javascript to add a class to the clicked cells.

You can even use a onlick event handler on the table tag instead of one for each cell to reduce overhead.

Then from the event object find the nearest TD tag to the clicked element (on firefox it might be the text element in the td, on IE it might be the TD it self).

---

why is creating 5000 div tags too much? If each div is just <div id='ixxx'/> where "xxx" is a base 36 number then that is just 5000 * 16 = 80,000 bytes. Not too big to be honest.

Then you can just define a class "clicked" in css and apply an opacity (use alpha for IE).

---

You should create the table by using JavaScript, you can use the DOM for create objects dynamically, doing this you avoid passing large objects on the network. And also it easier to customize DOM objects by means of JavaScript than on the server side by means of pure HTML or Server side Controls.

<html>
    <head>
        <style>
            table.class_table {font-size:7pt; color:green; border:blue; hover-cursor:hand;}
        </style>
        <script type="text/javascript">
            function CreateTable()
            {
                var f, c;
                var table = document.getElementById("id_table")
                for(f=0; f<100; f++)
                {
                    var row = table.insertRow(f);
                    for(c=0; c<100; c++)
                    {
                        var cell = row.insertCell(c);
                        cell.onclick = OnCellClick;
                        cell.id='c' + f.toString() + c.toString();
                        cell.innerHTML = f +';' + c;
                    }
                }               
            }
            function OnCellClick()
            { 
                this.style.backgroundColor='orange';
                alert('clicked:' + this.innerHTML);             
            }
        </script>
    </head>
    <body onload="javascript:CreateTable()">
        <div id="id_div">
            <table id="id_table" class="class_table" border="1">
            </table>
        </div>
    </body>
</html>