Sorting Table by td data

Question

I have a table that is created dynamically through jquery append. The data comes from a database. In the table I need to sort the data by the number in the specific td id ItemID which is a number. I have been all over the internet trying to figure it out and can't find anyuthing close to what i need.

There are 10 columns accross the table the sixth column is the cells with ItemID td's. In these cells are numbers. I need to sort my table from 1-greater according to the numbers. I need the most efficient way to do that. It cannot be done server side as the data is taken from a database in a way i've never seen. It is aligned now according to colummn three alphabetically which is a description of the data.

    function DrawRow ( link,Status,Value,ResultName,DateTime,LSL,OPT,USL,LCL,UCL,LO1L,UO1L,LO2L,UO2L,CpK,CP,
         PPK,PP,TestDue,TestLate,ExpNeeded,ExpLate,AddsNeeded,AddsLate,Count,ActiveCount,Dummy1,
         ReviewedBy,TestID,ItemID,Dummy2 ) {...

it starts as a function, then there are many more function to better define link,value... then it is drawn like this

    $(document.getElementById("drawrows")).append( "<table id='drawr' style='width:100%;cell-padding:2px; border-collapse:collapse;'><tr id='row' class='row' style='background-color:"+s+";height:0px;'><td id='Review2'  style='background-image:url();background:"+s2+";width:21px;height:"+h+";text-align:center;font-size:"+sz+" arial;color:"+cr+";'><b>"+ReviewIcon+"</b></td>"+
"<td id='TestSt2' 'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').text('"+mOvrTxtst2+"'); $('td#Desc360').css({'color':'"+cr8+"','background': '"+s1+" url("+bckGrndIm+") repeat', 'font-family':'arial black'}); $('div#DesDiv').text('"+mOvrTxtst+"'); $('div#DesDiv').css({'width':'694px', 'height':'42px'});\"   onmouseleave=\"$('td#Desc360').text('');$('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"'); $('td#Desc360').css('background', 'url()');\"   style='background: "+s1+" url(); width:131px;height:"+h+";text-align:center;color:"+cr1+";'>"+TestStatus+"</td>"+
"<td id='Value2'  'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').text('"+Value+" "+firstWord+"'); $('td#Desc360').css({'color':'"+cr+"','font-family':'arial black'}); $('div#DesDiv').text('"+mOvrTxtRslt+"'); $('td#Desc360').css('background', ' "+s+" url("+bckGrndRs+") repeat'); $('div#DesDiv').css({'width':'694px', 'height':'42px'});\" onmouseout=\"$('td#Desc360').text(''); $('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"'); $('td#Desc360').css('background', 'url()');\"  style='background: "+s+" url(); width:64px; text-align:right; font:bold 14px tahoma; color:"+cTxt+"; border-right:0px solid #999966;'>"+Value1+"</td>"+
"<td id='Result2' 'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').text('"+Value+" "+ResultName+"'); $('td#Desc360').css({'color':'"+cr+"','font-family':'arial black'}); $('div#DesDiv').text('"+mOvrTxtRslt+"'); $('td#Desc360').css('background', ' "+s+" url("+bckGrndRs+") repeat'); $('div#DesDiv').css({'width':'694px', 'height':'42px'});\" onmouseout=\"$('td#Desc360').text('');  $('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"'); $('td#Desc360').css('background', 'url()');\" style='background: "+s+" url(); width:283px;text-align:"+a+"; font:bold 14px tahoma; color:"+cTxt+"; border-left: 0px solid #003300;'>"+ResultName3+"</td>"+
"<td id='Date'    'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').html('Last Test was at "+DateTime+"'); $('td#Desc360').css('background','"+s+"');  $('td#Desc360').css({'color':'"+cr+"','font-family':'arial black'}); $('div#DesDiv').text('"+mOvrTxtDate+"'); $('td#Desc360').css('background', ' "+s+" url("+bckGrndRs+") repeat'); $('div#DesDiv').css({'width':'694px', 'height':'42px'});\" onmouseout=\"$('td#Desc360').text(''); $('td#Desc360').css('background-color',''); $('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"')\" style='background-color:"+s+" ;width:105px;height:"+h+";text-align:center;font:bold 12px tahoma;color:"+cTxt+";'><b>"+fmtDateTime1+"</b></td>"+
"<td id='ItemID'  'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').html('"+Item+"'); $('td#Desc360').css({'background':'"+s+"', 'color':'"+cr+"'}); $('div#DesDiv').text('"+mOvrTxtItem+"'); $('div#DesDiv').css({'width':'694px', 'height':'42px'}); $('td#Desc360').css('background', ' "+s+" url("+bckGrndRs+") repeat');\" onmouseout=\"$('td#Desc360').text(''); $('td#Desc360').css('background',''); $('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"')\" style='background:"+s+" ;width:25px; height:"+h+";text-align:center;font:bold 14px tahoma;color:"+cTxt+";border-left:0px solid #003300;'><b>&nbsp;"+ItemID+"</b></td>"+
"<td id='LSL'     'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').html('"+LSL2+"'); $('td#Desc360').css({'background':'"+s+"', 'color':'"+cr+"'}); $('div#DesDiv').text('"+mOvrTxtLSL+"'); $('div#DesDiv').css({'width':'694px', 'height':'42px'}); $('td#Desc360').css('background', ' "+s+" url("+bckGrndRs+") repeat');\" onmouseout=\"$('td#Desc360').text(''); $('td#Desc360').css('background',''); $('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"')\" style='background:"+s+" ;width:65px; height:"+h+";text-align:right;font:bold 14px tahoma;color:"+cTxt+";;border-right:0px solid #999966;'><b>"+LSL1+"&nbsp;</b></td>"+
"<td id='OPT'     'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').html('"+OPT2+"');  $('td#Desc360').css({'background':'"+s+"', 'color':'"+cr+"'}); $('div#DesDiv').text('"+mOvrTxtOPT+"'); $('div#DesDiv').css({'width':'694px', 'height':'42px'}); $('td#Desc360').css('background', ' "+s+" url("+bckGrndRs+") repeat');\" onmouseout=\"$('td#Desc360').text(''); $('td#Desc360').css('background',''); $('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"')\" style='background:"+s+" ;width:65px; height:"+h+";text-align:center;font:bold 14px tahoma; color:"+cTxt+";border-left:0px solid #003300;border-right:0px solid #999966;'><b>"+OPT1+"</b></td>"+
"<td id='USL'     'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').html('"+USL2+"'); $('td#Desc360').css({'background':'"+s+"', 'color':'"+cr+"'}); $('div#DesDiv').text('"+mOvrTxtUSL+"'); $('div#DesDiv').css({'width':'694px', 'height':'42px'}); $('td#Desc360').css('background', ' "+s+" url("+bckGrndRs+") repeat');\" onmouseout=\"$('td#Desc360').text(''); $('td#Desc360').css('background',''); $('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"')\" style='background:"+s+" ;width:65px; height:"+h+";text-align:left;font:bold 14px tahoma;color:"+cTxt+";border-left:0px solid #003300;'><b>&nbsp;"+USL1+"</b></td>"+
"<td id='LCL'     'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').html('"+txtLCL+" "+LCL+" "+firstWord+" "+txtUCL+" "+UCL+" "+firstWord+"'); $('td#Desc360').css({'background':'"+s+"', 'color':'"+cr+"', 'text-align':'center', 'padding-left':'0px'}); $('div#DesDiv').text('"+mOvrTxtCon+" "+ResultName+"'); $('div#DesDiv').css({'width':'694px', 'height':'42px'}); $('td#Desc360').css('background', ' "+s+" url("+bckGrndRs+") repeat');\" onmouseout=\"$('td#Desc360').text(''); $('td#Desc360').css('background',''); $('td#Desc360').css('padding-left',''); $('div#DesDiv').text('"+Txt+"')\"style='background:"+s+" ;width:110px;height:"+h+";text-align:center;font:bold 14px tahoma;color:"+cTxt+";'><b>"+LCL2+" - "+UCL2+"</b></td></tr></table>" );

$(document.getElementById("drawrows2")).append( "<tr id='row' style='background:"+s+";'><td id='Review' onmouseover=\" this.style.cursor='default';\" style='background:"+s2+";width:21px; height:"+h+";text-align:center;font:"+sz+";color:"+cr2+";'>"+ReviewIcon1+"</td>"+
"<td id='TestSt' 'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').text('"+mOvrTxtst4+"'); $('td#Desc360').css({'color':'"+cr9+"','background': '"+s2+" url("+bckGrndIm2+") repeat', 'font-family':'arial black'}); $('div#DesDiv').text('"+mOvrTxtst3+"'); $('div#DesDiv').css({'width':'694px', 'height':'42px'});\" onmouseleave=\"$('td#Desc360').text('');$('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"'); $('td#Desc360').css('background', 'url()');\" style='background:"+s3+";width:142px;height:"+h+";text-align:center;color:"+cr2+";'>"+LastTest+"</td>"+
"<td id='Value'  'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').text('"+Value+" "+ResultName+"'); $('td#Desc360').css({'color':'"+cr+"','font-family':'arial black'}); $('div#DesDiv').text('"+mOvrTxtRslt+"'); $('td#Desc360').css('background', ' "+s+" url("+bckGrndRs+") repeat'); $('div#DesDiv').css({'width':'694px', 'height':'42px'});\" onmouseout=\"$('td#Desc360').text(''); $('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"'); $('td#Desc360').css('background', 'url()');\" style='background:"+s+"; width:80px; height:"+h+";text-align:center;font:"+sz+" tahoma;color:"+cTxt+"; '>"+Value2+"</td>"+
"<td id='Result' 'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').text('"+Value+" "+ResultName+"'); $('td#Desc360').css({'color':'"+cr+"','font-family':'arial black'}); $('div#DesDiv').text('"+mOvrTxtRslt+"'); $('td#Desc360').css('background', ' "+s+" url("+bckGrndRs+") repeat'); $('div#DesDiv').css({'width':'694px', 'height':'42px'});\" onmouseout=\"$('td#Desc360').text(''); $('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"'); $('td#Desc360').css('background', 'url()');\" style='background:"+s+";width:293px; height:"+h+";text-align:center; font:"+sz+" tahoma;color:"+cTxt+"; '>"+ResultName4+"</td>"+
"<td id='LO1L'   'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').text('"+LO1L+"'); $('td#Desc360').css('background', ' "+s+" url("+bckGrndRs+") repeat'); $('div#DesDiv').text('"+mOvrTxtThrSigL+"'); $('td#Desc360').css({'color':'"+cr+"','font-family':'arial black'});$('div#DesDiv').css({'width':'694px', 'height':'42px'});\" onmouseleave=\"$('td#Desc360').text('');$('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"'); $('td#Desc360').css('background', 'url()');\" style='background:"+s+";width:73px; height:"+h+";text-align:right;font:"+sz+" tahoma;color:"+cTxt+"; border-right:0px solid #999966; '><b>"+LO1L1+"</td>"+
"<td id='UO1L'   'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').text('"+UO1L+"'); $('td#Desc360').css('background', ' "+s+" url("+bckGrndRs+") repeat'); $('div#DesDiv').text('"+mOvrTxtThrSigU+"'); $('td#Desc360').css({'color':'"+cr+"','font-family':'arial black'});$('div#DesDiv').css({'width':'694px', 'height':'42px'});\" onmouseleave=\"$('td#Desc360').text('');$('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"'); $('td#Desc360').css('background', 'url()');\" style='background:"+s+";width:73px; height:"+h+";text-align:left;font:"+sz+" tahoma;color:"+cTxt+"; border-left:0px solid #999966; '><b>"+UO1L1+"</td>"+
"<td id='LO2L'   'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').text('"+LO2L+"'); $('td#Desc360').css('background', ' "+s+" url("+bckGrndRs+") repeat'); $('div#DesDiv').text('"+mOvrTxtSixSigL+"'); $('td#Desc360').css({'color':'"+cr+"','font-family':'arial black'});$('div#DesDiv').css({'width':'694px', 'height':'42px'});\" onmouseleave=\"$('td#Desc360').text('');$('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"'); $('td#Desc360').css('background', 'url()');\" style='background:"+s+";width:73px; height:"+h+";text-align:right;font:"+sz+" tahoma;color:"+cTxt+"; border-right:0px solid #999966; '><b>"+LO2L1+"</td>"+
"<td id='LO2L'   'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').text('"+UO2L+"'); $('td#Desc360').css('background', ' "+s+" url("+bckGrndRs+") repeat'); $('div#DesDiv').text('"+mOvrTxtSixSigU+"'); $('td#Desc360').css({'color':'"+cr+"','font-family':'arial black'});$('div#DesDiv').css({'width':'694px', 'height':'42px'});\" onmouseleave=\"$('td#Desc360').text('');$('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"'); $('td#Desc360').css('background', 'url()');\" style='background:"+s+";width:73px; height:"+h+";text-align:left;font:"+sz+" tahoma;color:"+cTxt+"; border-left:0px solid #999966; '><b>"+UO2L1+"</td>"+
"<td id='CpK'    'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').text('"+CpK1+"'); $('td#Desc360').css({'color':'"+cr10+"','font-family':'arial black'}); $('div#DesDiv').text('"+mOvrTxtCpK+"'); $('td#Desc360').css('background', ' "+s4+" url("+bckGrndCpK+") repeat'); $('div#DesDiv').css({'width':'694px', 'height':'42px'});\" onmouseout=\"$('td#Desc360').text(''); $('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"'); $('td#Desc360').css('background', 'url()');\" style='background:"+s4+";width:43px; height:"+h+";text-align:center;font:"+sz+" tahoma;color:"+cr3+";'><b>"+CpK+"</td>"+
"<td id='CP'     'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').text('"+CP1+"'); $('td#Desc360').css({'color':'"+cr11+"','font-family':'arial black'}); $('div#DesDiv').text('"+mOvrTxtCp+"'); $('td#Desc360').css('background', ' "+s5+" url("+bckGrndCp+") repeat'); $('div#DesDiv').css({'width':'694px', 'height':'42px'});\" onmouseout=\"$('td#Desc360').text(''); $('td#Desc360').css('color',''); $('div#DesDiv').text('"+Txt+"'); $('td#Desc360').css('background', 'url()');\" style='background:"+s5+";width:43px; height:"+h+";text-align:center;font:"+sz+" tahoma;color:"+cr4+";'><b>"+CP+"</td>"+
"<td id='PPK'    'Link' onmouseover=\" this.style.cursor='default'; $('td#Desc360').text('"+PPK1+"'); $('td#Desc360').css({'color':'"+cr12+"','font-family':'arial black'}); $('div#DesDiv').text('"+mOvrTxtPpK+"'); $('td#Desc360').css('background', ' "+s6+" url("+bckGrndPpK+") repeat'); $('div#DesDiv').css({'width':'694px', 'height':'42px'});\" onmouseout=\"$('td#Desc360').text(''); $('td#Desc360').css('color',''); $('div#DesDiv').text ('"+Txt+"'); $('td#Desc360').css('background', 'url()');\" style='background:"+s6+";width:43px;    height:"+h+";text-align:center;font:"+sz+" tahoma;color:"+cr5+";'><b>"+PPK+"</td></tr>" );

Answer 1

There can be solutions to sort table rows but a simple trick, If you are selecting from database you can use ORDER BY whatever_number_field . Data will be selected sorted and jquery at the end will iterate and append in sorted way.

What I meant is sort data before jquery iterations..