Monday, May 13, 2024
 Popular · Latest · Hot · Upcoming
57
rated 0 times [  59] [ 2]  / answers: 1 / hits: 16723  / 14 Years ago, sun, january 9, 2011, 12:00:00

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


More From » jquery

 Answers
30

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


[#94317] Thursday, January 6, 2011, 14 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
nora

Total Points: 248
Total Questions: 111
Total Answers: 97

Location: India
Member since Wed, Aug 4, 2021
3 Years ago
;