按td数据排序表

Question

我有一个通过jquery append动态创建的表。 数据来自数据库。 在表中，我需要按特定的td id ItemID中的数字对数据进行排序，该数字是一个数字。 我到处都是互联网，试图找出答案，却找不到我所需要的东西。

表格中共有10列，第六列是ItemID为td的单元格。 在这些单元格中是数字。 我需要根据数字从1-great排序我的表。 我需要最有效的方法。 它无法在服务器端完成，因为数据是以我从未见过的方式从数据库中获取的。 现在根据列三按字母顺序对齐，这是对数据的描述。

    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迭代之前对数据进行排序。