Creating a background of dynamically spaced vertical lines

I have a fairly complex view involving a background grid of vertical lines representing a time period 5 minutes each. The spacing of these lines is dynamic as is the height. Here is how I currently generating them,

**开发者_JS百科snip**
outtxt_norm = '<div class="tl-td" style="width: ' + 
              (TIME_SECONDSPERHALFHOUR*_scale/6) + 
              'px; height: ' + (_table_height) + 'px;"></div>';
outarr = [];
for(idx = 0, difference = 288*totaldays; idx < difference;){
     outarr[idx++] = outtxt_norm;
}
$('#parent').append(outarr.join(''));
outarr = [];

**snip**

totaldays can be from 1 to 30. In the case where it is 30, the .append() call is taking over 10 seconds to complete and I've tried using a table and divs to create it with no difference in time. If I remove the styles then they can be created in 1 second but then applying the styles to them crashes FF.

Is there a faster way to create a background of vertical lines of dynamic width?

I am not sure what you are using this for. If it is something for data visualisation like a graph then SVG could be a good option. Check raphaeljs for this.

Hope it helps

• DEMO 2: http://ask.altervista.org/php5/demo/creating-a-background-of-dynamically-spaced-vertical-lines/

Server Side

<?php
 header('Content-type: application/json');
 $array = array();
 for ($i = 0; $i <= 4000; $i++) {
        array_push( $array, array( rand(1,2) , ( rand(1,30) * 5 ) ) );
    }                           
   echo json_encode($array);
?>

Client Side

$(function() {
    $.getJSON('points.php',function(data) {
        $.each(data,function(i, item) {
            $('#points-map').append('<div class="inner" style="width:' + data[i][0] + 'px;height:' + data[i][1] + 'px"></div>');
        });
    });
});