i am having problems with the below code:

function showTableData()
{
    var tableArray;
    var x = 0;
    var theHTML;

    for (i = 0; i < 7032; i++)
    {
        if (x = 0)
        {
            theHTML = '<tr>' + 
                '<th scope="row" class="spec">' + partNum[i] + '</th>' + 
                '<td>' + Msrp[i] + '</td>' + 
                '<td>' + blah[i] + '</td>' + 
                '<td>' + blahs[i] + '</td>' + 
            '</tr>' + theHTML;
            x++;
        }else{
            theHTML = '<tr>' + 
                '<th scope="row" class="specalt">' + partNum[i] + '</th>' + 
                '<td class="alt">' + Msrp[i] + '</td>' + 
                '<td class="alt">' + blah[i] + '</td>' + 
                '<td class="alt">' + blahs[i] + '</td>' + 
            '</tr>' + theHTML;
            x--;
        }
    }
    theHTML = '<table id="mytable" cellspacing="0">' + 
    '<tr>' + 
        '<th scope="col" abbr="Configurations" class="nobg">Part Number</th>' + 
        '<th scope="col" abbr="Dual 1.8">Msrp Price</th>' + 
        '<th scope="col" abbr="Dual 2">blahs Price</th>' + 
    '<th scope="col" abbr="Dual 2.5">Low Price</th>' + 
    '</tr>' + theHTML + '</table>';

    $('#example').append(theHTML);
}
 </script>

 <div id="example">
 </div>

The problem being that the $('#example').append(theHTML); never executes (or shows on the page). I think its because the string is soooooo long! It has over 7,000 items in the array so im not sure if thats the reason or if its something else?

Any help would be great! Thanks!

David

i am having problems with the below code:

function showTableData()
{
    var tableArray;
    var x = 0;
    var theHTML;

    for (i = 0; i < 7032; i++)
    {
        if (x = 0)
        {
            theHTML = '<tr>' + 
                '<th scope="row" class="spec">' + partNum[i] + '</th>' + 
                '<td>' + Msrp[i] + '</td>' + 
                '<td>' + blah[i] + '</td>' + 
                '<td>' + blahs[i] + '</td>' + 
            '</tr>' + theHTML;
            x++;
        }else{
            theHTML = '<tr>' + 
                '<th scope="row" class="specalt">' + partNum[i] + '</th>' + 
                '<td class="alt">' + Msrp[i] + '</td>' + 
                '<td class="alt">' + blah[i] + '</td>' + 
                '<td class="alt">' + blahs[i] + '</td>' + 
            '</tr>' + theHTML;
            x--;
        }
    }
    theHTML = '<table id="mytable" cellspacing="0">' + 
    '<tr>' + 
        '<th scope="col" abbr="Configurations" class="nobg">Part Number</th>' + 
        '<th scope="col" abbr="Dual 1.8">Msrp Price</th>' + 
        '<th scope="col" abbr="Dual 2">blahs Price</th>' + 
    '<th scope="col" abbr="Dual 2.5">Low Price</th>' + 
    '</tr>' + theHTML + '</table>';

    $('#example').append(theHTML);
}
 </script>

 <div id="example">
 </div>

The problem being that the $('#example').append(theHTML); never executes (or shows on the page). I think its because the string is soooooo long! It has over 7,000 items in the array so im not sure if thats the reason or if its something else?

Any help would be great! Thanks!

David

• javascript
• jquery
• arrays
• performance

• 1 if (x=0) (line 9) should be if (x==0) don't know if that is just a typo though – Hemlock Commented Jan 9, 2011 at 3:52
• Are you sure that the function has been called properly? – Ryan Li Commented Jan 9, 2011 at 3:52
• 2 Some advice. Build up an array using push instead of string concatenation. Then use array.join('') before you append the html. Better performance. – Hemlock Commented Jan 9, 2011 at 3:55
• Thanks, Hemlock. Fixed that error. – StealthRT Commented Jan 9, 2011 at 4:25

5 Answers 5

Apart from the if (x = 0) that should really be if (i % 2 === 0), you really should improve performance here by using Array.join() method instead of concatenating strings. This will have a similar effect to a StringBuilder in C# or Java.

For example:

function showTableData()
{
    var tableArray;
    var theHTML = [];
    theHTML.push('<table id="mytable" cellspacing="0">',
    '<tr>', 
        '<th scope="col" abbr="Configurations" class="nobg">Part Number</th>', 
        '<th scope="col" abbr="Dual 1.8">Msrp Price</th>',
        '<th scope="col" abbr="Dual 2">blahs Price</th>', 
    '<th scope="col" abbr="Dual 2.5">Low Price</th>', 
    '</tr>');

    for (var i = 0; i < 7032; i++)
    {
        if (i % 2 == 0)
        {
             theHTML.push('<tr>', 
                 '<th scope="row" class="spec">', partNum[i], '</th>',
                 '<td>', Msrp[i], '</td>', 
                 '<td>', blah[i], '</td>', 
                 '<td>', blahs[i], '</td>', 
             '</tr>');
        } else {
             theHTML.push('<tr>',
                 '<th scope="row" class="specalt">', partNum[i], '</th>', 
                 '<td class="alt">', Msrp[i], '</td>', 
                 '<td class="alt">', blah[i], '</td>', 
                 '<td class="alt">', blahs[i], '</td>',
             '</tr>');
        }
    }
    theHTML.push('</table>');

    $('#example').append(theHTML.join(''));
}
 </script>

 <div id="example">
 </div>

The reason why appending string 'my' + ' appended' + ' string' is slower than joining strings ['my', ' joined', ' string'].join('') is because JavaScript strings are immutable so in the former example there is a third string created every time 2 strings are concatenated, which is a very expensive operation pared to adding new entries into an array.

See also a Javascript StringBuilder project built using the same priciples of Array.push() and Array.join().

The performance improvement on this project for 10,000 concatenations in IE was down from over 1 minute to 0.23 seconds.

UPDATE: Additional calls to Array.join() added to replace string concatenation within the for-loop, this is to improve client rendering speeds further. + Added better link to StringBuilder.

FURTHER UPDATE: Added suggestions by Hemlock:

1. Removed use of globally scoped variable by defining var i = 0 in for-loop
2. Pushed several strings at a time using multiple parameters of Array.push().

one error i saw was that if (x = 0) should be if (x == 0), other than that it seems to work for me: http://jsfiddle/9vvJ6/

This line:

if (x = 0)

shouldn't it be

if (x == 0)

Might be the error here causing the rest of the script not being able to be executed.

If you're already using jQuery here, you might want to consider jQuery templates here, it would most likely clean up your code quite a bit and make your life easier. There can be performance tradeoffs (but I think string interpolation is faster than string concatenation in JavaScript, so this could even be faster?), but what you may or may not lose in performance, it's a much more elegant solution. You could keep your entire template in one place (maybe an external file, or parts of it hidden in the DOM of your document, I haven't used it enough to tell you what the best practice is), and then use jQuery templates to do the string replacement. There are multiple jQuery-based template frameworks, but the one I linked to is being an official part of jQuery.

The problem is with .append jquery function. You can not use .html or .append function for long string. Instead you need to use .innerHTML

Try this

document.getElementById('example').innerHTML=theHTML.join('');