Таблица сортировки по данным td

Question

У меня есть таблица, которая создается динамически через jquery append. Данные поступают из базы данных. В таблице мне нужно отсортировать данные по числу в определенном идентификаторе td id, который является числом. Я был по всему интернету, пытаясь понять это, и не могу найти ничего, близкого к тому, что мне нужно.

Есть 10 столбцов по таблице, шестой столбец - ячейки с ItemID td's. В этих ячейках есть числа. Мне нужно отсортировать таблицу с 1-го по номерам. Мне нужен самый эффективный способ сделать это. Это не может быть сделано на стороне сервера, поскольку данные берутся из базы данных так, как я никогда не видел. Он теперь выровнен в соответствии с colummn три в алфавитном порядке, который является описанием данных.

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) {... 

начинается как функция, то есть много других функций, чтобы лучше определить ссылку, значение ... то рисуется как этот

$(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

Там могут быть решения для сортировки строк таблицы но простой трюк. Если вы выбираете из базы данных, вы можете использовать ORDER BY whatever_number_field. Данные будут отсортированы, а jquery в конце будет выполнять итерацию и добавление отсортированным способом.

Я имел в виду данные сортировки, прежде чем jquery итераций ..