many hidden divs or replacing content of single div?

When the user moves their cursor over different regions of an image on my page I am updating the content of a table which gives more detail to them. This table content is generated server side.

At the moment, I am storing the 50 or so different tables within their own divs which are hidden un开发者_如何学编程til the respective mouseover event.

Is this the best way of achieving this? Is it better to use javascript to just replace the table content of a single div?

Thanks, A.

Well, if it's 50 identical tables (structure-wise) with unique content, I'd probably settle for a custom object or something like that, instead of hiding 50 tables (50 tables = overhead in comparison versus 1 table).

Try the following (somewhat pseudo) using jQuery:

var data_rows = $('#table').children('tr');
var region_information = { 
    0: { name: "Foo", location: "Loo"}, 
    1:{ name: "Bar", location: "Car" }, 
    2{ name: "Car", location: "Garage"} 
};

$('.regions').hover(
    function() {

        //Store the region for *performance*
        var this_region = $('this');        

        /* 
            Set the values in the table by getting the field corresponding to the substring
            The format = region-{n}, where {n} is a positive digit
            Repeat this `n` times, according to how many "values" you need to display per table
        */
        data_rows.children('field1').text(
            region_information[this_region.attr('name').substring(7, 1)]
        );
  }
);

Did this make sense? AS I don't know what your table looks like or anything, I can't quite tell you exactly how to do it. I can however provide you with a pseudo-like code (like the one above), so I hope it helps you out!