td 데이터로 테이블 정렬

Question

jquery append를 통해 동적으로 생성 된 테이블이 있습니다. 데이터는 데이터베이스에서 가져옵니다. 테이블에서 특정 ID ID 항목 번호에있는 숫자로 데이터를 정렬해야합니다. 나는 그것을 파악하려고 노력하는 인터넷의 도처에 있었고, 내가 필요로하는 것에 가깝게 anyuthing을 발견 할 수 없었다.

테이블에 10 개의 열이 있고, 6 번째 열에 ItemID td가있는 셀이 있습니다. 이 셀에는 숫자가 있습니다. 숫자에 따라 1에서 큰 테이블을 정렬해야합니다. 가장 효율적인 방법이 필요합니다. 내가 본 적이없는 방식으로 데이터베이스에서 데이터를 가져 오므로 서버 측에서 처리 할 수 ​​없습니다. 데이터의 설명 인 알파벳순으로 3 열에 따라 정렬됩니다. 이 함수로 시작

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 반복하기 전에 정렬 데이터입니다 ..