ansaurus

Question

Large 5000 cell Grid using css, javascript and xhtml

Answer 1

A:

http://css-tricks.com/examples/DrawingTable/

You could use this as a starting point.

jnpcl 2010-10-27 21:27:45

Answer 2

A:

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

David Mårtensson 2010-10-27 21:28:15

Answer 3

A:

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

tster 2010-10-27 21:28:31

It is not the byte. But the number of DOM element browser needs to handle. 5000 should be ok. :)

seatoskyhk 2010-10-27 22:41:48

Answer 4

+1 A:

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

Create the elements, each with a different id but all with the same class.
Bind a click event to all of the elements
in your click handler, you can add a class, such as clicked, to the originating element.
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.

Andy Groff 2010-10-27 21:33:41

Answer 5

+1 A:

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.

seatoskyhk 2010-10-27 21:52:11

Answer 6

A:

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>

ArceBrito 2010-10-27 23:32:14

Answer 7

+1 A:

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.

Rimantas 2010-10-28 00:47:03

ansaurus

tags:

views:

answers:

Large 5000 cell Grid using css, javascript and xhtml

related questions