关于一个动态排序的问题，谁能帮我解决，立即给分！

http://www.blueidea.com/user/darkvn/Scripts/magicTable/Demo.html去研究一下 动态行增删 ，列排序

解决方案 »

  1.   

    <head><STYLE type=text/css>
    .listDataTable { 
    FONT-SIZE: 15px; FONT-FAMILY: "Arial"
    }
    .listTableHead {
    FONT-WEIGHT: bold; CURSOR: hand; FONT-FAMILY: "Arial"
    }
    .onMouseOnTr {
    CURSOR: default; COLOR: #ffffff; BACKGROUND-COLOR: #006699
    }
    .listTableHeadO {
    FONT-WEIGHT: bold; CURSOR: s-resize; COLOR: #ffffff; FONT-FAMILY: "Arial"; 
    BACKGROUND-COLOR: #006699
    }
    .listHeadClicked {
    FONT-WEIGHT: bold; CURSOR: n-resize; COLOR: #ffffff; BACKGROUND-COLOR: #990033
    }
    .listHeadClicked0 {
    FONT-WEIGHT: bold; CURSOR: s-resize; COLOR: #ffffff; BACKGROUND-COLOR: #990033
    }
    </STYLE> 
    </head><body><script>function JM_jumpPage(direct,page,rows){
    page=(direct=='up')?page-1:page+1;
    document.location='openings.php?page0='+page+'&rowsLimit='+rows;
    }
    function JM_HLTr(hStyle){
    eSrcObject=event.srcElement
    if (eSrcObject.tagName=="TABLE")
    return
    while(eSrcObject.tagName!="TR"&&eSrcObject.onyes!='head')
    eSrcObject=eSrcObject.parentElement
    if (eSrcObject.className!=hStyle&&eSrcObject.onyes!='head'&&eSrcObject.id!="ignore"&&eSrcObject.className!='delStyle'&&eSrcObject.className!='listTableHead'&&eSrcObject.className!='listTableHead0'){
    eSrcObject.className=hStyle}
    if (eSrcObject.onyes=='head'&&eSrcObject.className!='listHeadClicked'&&eSrcObject.className!='listHeadClicked0'){
    eSrcObject.className='listTableHeadO';
    }
    }
    function JM_HLTrRestore(sStyle){
    if (event.fromElement.contains(event.toElement)||eSrcObject.contains(event.toElement)||eSrcObject.id=="ignore"||eSrcObject.className=='delStyle')
    return
    if (event.toElement!=eSrcObject){
    if (event.srcElement.onyes=='head'&&eSrcObject.className!='listHeadClicked'&&eSrcObject.className!='listHeadClicked0'){
    event.srcElement.className='listTableHead'}
    else if(eSrcObject.className!='listHeadClicked'&&eSrcObject.className!='listHeadClicked0'){
    eSrcObject.className=sStyle}
    }
    }
    function JM_PowerList(colNum){
    headEventObject=event.srcElement
    while(headEventObject.tagName!="TR"){
    headEventObject=headEventObject.parentElement}
    for (i=0;i<headEventObject.children.length;i++){
    if (headEventObject.children[i]!=event.srcElement){
    headEventObject.children[i].className='listTableHead'}
    }
    var tableRows=0;
    trObject=DataTable.children[0].children
    for (i=0;i<trObject.length;i++){
    Object=DataTable.children[0].children[i];
    tableRows=(trObject[i].id=='ignore')?tableRows:tableRows+1;
    }
    var trinnerHTML=new Array(tableRows)
    var tdinnerHTML=new Array(tableRows)
    var tdNumber=new Array(tableRows)
    var i0=0
    var i1=0
    for (i=0;i<trObject.length;i++){
    if (trObject[i].id!='ignore'){
    trinnerHTML[i0]=trObject[i].innerHTML;
    tdinnerHTML[i0]=trObject[i].children[colNum].innerHTML;
    tdNumber[i0]=i;
    i0++;
    }
    }
    sourceHTML=clearStart.children[0].outerHTML;
    //alert(sourceHTML);
    for (bi=0;bi<tableRows;bi++){
    for (i=0;i<tableRows;i++){
    if(tdinnerHTML[i]>tdinnerHTML[i+1]){
    t_s=tdNumber[i+1];
    t_b=tdNumber[i];
    tdNumber[i+1]=t_b;
    tdNumber[i]=t_s;
    temp_small=tdinnerHTML[i+1];
    temp_big=tdinnerHTML[i];
    tdinnerHTML[i+1]=temp_big;
    tdinnerHTML[i]=temp_small;
    }
    }
    }
    var showshow='';
    var numshow='';
    for (i=0;i<tableRows;i++){
    showshow=showshow+tdinnerHTML[i]+'\n';
    numshow=numshow+tdNumber[i]+'|';
    }
    sourceHTML_head=sourceHTML.split("<TBODY>");
    numshow=numshow.split("|");
    var trRebuildHTML='';
    if (event.srcElement.className=='listHeadClicked'){
    for (i=0;i<tableRows;i++){
    trRebuildHTML=trRebuildHTML+trObject[numshow[tableRows-1-i]].outerHTML;}
    event.srcElement.className='listHeadClicked0';
    }else{
    for (i=0;i<tableRows;i++){
    trRebuildHTML=trRebuildHTML+trObject[numshow[i]].outerHTML;
    }
    event.srcElement.className='listHeadClicked';
    }
    var DataRebuildTable='';
    DataRebuildTable=sourceHTML_head[0]+trObject[0].outerHTML+trRebuildHTML+trObject[tableRows+1].outerHTML+'</TABLE>';
    clearStart.innerHTML='';
    clearStart.innerHTML=DataRebuildTable;
    }
    </script>
      

  2.   

    <TABLE cellSpacing=0 cellPadding=3 width="100%" border=0>
                        <TBODY>
                        <TR>
                          <TD id=clearStart>
                            <TABLE class=listDataTable id=DataTable 
                            onmouseover="JM_HLTr('onMouseOnTr')" 
                            onmouseout="JM_HLTrRestore('')" cellSpacing=2 
                            cellPadding=2 width="100%" border=0>
                              <TBODY>
                              <TR id=ignore bgColor=#eeeeee>
                                <TD class=listTableHead onclick=JM_PowerList(0) 
                                onyes="head">Positions</TD>
                                <TD class=listTableHead onclick=JM_PowerList(1) 
                                onyes="head">Code</TD>
                                <TD class=listTableHead onclick=JM_PowerList(2) 
                                onyes="head">NOP</TD>
                                <TD class=listTableHead onclick=JM_PowerList(3) 
                                onyes="head">Company Profile</TD>
                                <TD class=listTableHead onclick=JM_PowerList(4) 
                                onyes="head">Required Industry</TD>
                                <TD class=listTableHead onclick=JM_PowerList(5) 
                                onyes="head">Location</TD></TR>
                              <TR bgColor=#f7f7f7>
                                <TD>Financial Manager</TD>
                                <TD>000904122</TD>
                                <TD align=middle>1</TD>
                                <TD>Multinational Bank</TD>
                                <TD>Banking</TD>
                                <TD align=middle>GZ</TD></TR>
                              <TR bgColor=#fdfdfd>
                                <TD>Operation Manager</TD>
                                <TD>000904031</TD>
                                <TD align=middle>1</TD>
                                <TD>Leading US Company</TD>
                                <TD>Manufacturing</TD>
                                <TD align=middle>GZ</TD></TR>
                              <TR bgColor=#f7f7f7>
                                <TD>Infrastructure Engineer</TD>
                                <TD>000904026</TD>
                                <TD align=middle>1</TD>
                                <TD>Top 100 US Company (MFG)</TD>
                                <TD>IT</TD>
                                <TD align=middle>GZ</TD></TR>
                              <TR bgColor=#fdfdfd>
                                <TD>Logistics Manager</TD>
                                <TD>000901018</TD>
                                <TD align=middle>1</TD>
                                <TD>Leading European Company</TD>
                                <TD>Logistics</TD>
                                <TD align=middle>SY</TD></TR>
                              <TR bgColor=#f7f7f7>
                                <TD>ERP Consultant Leader</TD>
                                <TD>000901008</TD>
                                <TD align=middle>1</TD>
                                <TD>Big 5 CPA Firm</TD>
                                <TD>IT</TD>
                                <TD align=middle>SH</TD></TR>
                              <TR bgColor=#fdfdfd>
                                <TD>National IT Manager</TD>
                                <TD>000831044</TD>
                                <TD align=middle>1</TD>
                                <TD>Leading European Company</TD>
                                <TD>Logistics</TD>
                                <TD align=middle>SH</TD></TR>
                              <TR bgColor=#f7f7f7>
                                <TD>Financial Analyst</TD>
                                <TD>000828533</TD>
                                <TD align=middle>1</TD>
                                <TD>Top 100 US Company (MFG)</TD>
                                <TD>Finance</TD>
                                <TD align=middle>GZ</TD></TR>
                              <TR bgColor=#fdfdfd>
                                <TD>Solicitor</TD>
                                <TD>000828033</TD>
                                <TD align=middle>2</TD>
                                <TD>Multinational Law Firm</TD>
                                <TD>Legal</TD>
                                <TD align=middle>GZ</TD></TR>
                              <TR bgColor=#f7f7f7>
                                <TD>Translator/Interpreter</TD>
                                <TD>000828032</TD>
                                <TD align=middle>2</TD>
                                <TD>Multinational Firm</TD>
                                <TD>Legal</TD>
                                <TD align=middle>GZ</TD></TR>
    <TR bgColor=#fdfdfd>
                                <TD>Engineering Leader</TD>
                                <TD>000827468</TD>
                                <TD align=middle>1</TD>
                                <TD>Leading US Company</TD>
                                <TD>Chemicals</TD>
                                <TD align=middle>GZ</TD></TR>
                              <TR bgColor=#f7f7f7>
                                <TD>QA Manager/Leader</TD>
                                <TD>000826432</TD>
                                <TD align=middle>2</TD>
                                <TD>Leading US Company</TD>
                                <TD>Chemicals</TD>
                                <TD align=middle>GZ/SH</TD></TR>
                              <TR bgColor=#fdfdfd>
                                <TD>HR Manager</TD>
                                <TD>000826307</TD>
                                <TD align=middle>1</TD>
                                <TD>Famous European Company</TD>
                                <TD>IT</TD>
                                <TD align=middle>GZ</TD></TR>
                              <TR bgColor=#f7f7f7>
                                <TD>Financial Manager</TD>
                                <TD>000825313</TD>
                                <TD align=middle>1</TD>
                                <TD>Top 100 US Company (MFG)</TD>
                                <TD>Finance</TD>
                                <TD align=middle>GZ</TD></TR>
                              <TR bgColor=#fdfdfd>
                                <TD>Application Design E</TD>
                                <TD>000824303</TD>
                                <TD align=middle>1</TD>
                                <TD>Leading US Company</TD>
                                <TD>Chemicals</TD>
                                <TD align=middle>GZ</TD></TR>
                              <TR bgColor=#f7f7f7>
                                <TD>Legal Advisor</TD>
                                <TD>000818337</TD>
                                <TD align=middle>2</TD>
                                <TD>Top 100 US Company</TD>
                                <TD>Commercial</TD>
                                <TD align=middle>GZ/SH</TD></TR>
      

  3.   

    <TR bgColor=#fdfdfd>
                                <TD>Sales</TD>
                                <TD>000817102</TD>
                                <TD align=middle>2</TD>
                                <TD>Multinational SI</TD>
                                <TD>IT</TD>
                                <TD align=middle>GZ</TD></TR>
                              <TR bgColor=#f7f7f7>
                                <TD>Engineer</TD>
                                <TD>000816331</TD>
                                <TD align=middle>2</TD>
                                <TD>Multinational SI</TD>
                                <TD>IT</TD>
                                <TD align=middle>GZ</TD></TR>
                              <TR bgColor=#fdfdfd>
                                <TD>Senior Accountant</TD>
                                <TD>000811330</TD>
                                <TD align=middle>2</TD>
                                <TD>Multinational Bank</TD>
                                <TD>Banking</TD>
                                <TD align=middle>GZ</TD></TR>
                              <TR bgColor=#f7f7f7>
                                <TD>Process Specialist</TD>
                                <TD>000811222</TD>
                                <TD align=middle>1</TD>
                                <TD>Top 100 US Company</TD>
                                <TD>Chemicals</TD>
                                <TD align=middle>GZ</TD></TR>
                              <TR bgColor=#fdfdfd>
                                <TD>Consultant</TD>
                                <TD>000725386</TD>
                                <TD align=middle>2</TD>
                                <TD>Top 100 US Company</TD>
                                <TD>IT</TD>
                                <TD align=middle>GZ/SH</TD></TR>
                              <TR id=ignore>
                                <TD align=right 
                        colSpan=6></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></body>
      

  4.   

    没有那么复杂.一个冒泡的算法:
    function SortTable(oTbl,tdIdx,SortBy,DataType)
    {
    var ByAsc=(SortBy=="ASC")
    var aryTd=new Array()
    for(var i=0;i<oTbl.rows.length;i++)
    {
    if(oTbl.rows[i].cells[tdIdx] && !CheckSortIgnoreRows(oTbl,i))
    {
    var Data=oTbl.rows[i].cells[tdIdx].innerText
    aryTd[i]=ConvertDataType(Data,DataType)
    }
    }
       for(var i=0;i<aryTd.length-1;i++)
    {
    for(var j=0;j<aryTd.length-1-i;j++)
    {
    if(aryTd[j]==null){continue}
    var k=j+1
    while(aryTd[k]==null && k<aryTd.length-1-i){k++;}
    if(aryTd[k] && (ByAsc)?(aryTd[j]>aryTd[k]):(aryTd[j]<aryTd[k]))
    {
    if((k-j)==1)
    {oTbl.moveRow(k,j)}
    else
    {
    oTbl.moveRow(j)
    oTbl.moveRow(k-1,j)
    oTbl.moveRow(-1,k)
    }
    var tmp=aryTd[j]
    aryTd[j]=aryTd[k]
    aryTd[k]=tmp
    }
    }
    }
    }function ConvertDataType(Data,Type)
    {
    if(Type==null || Type==""){return Data}
    var Rst=Data
    switch(Type.toUpperCase())
    {
    case "CHAR":  //String
    Rst=Data
    break
    case "NUM":   //Numeric
    Rst=parseFloat(Data)
    if(isNaN(Rst))Rst=Data
    break
    case "MDY":  //The Day Format MM/DD/YY(or YYYY) or MM-DD-YY(or YYYY)
    var sp
    if(Data.indexOf("/")!=-1)
    {sp="/"}
    else if(Data.indexOf("-")!=-1)
    {sp="-"}
    else
    {return Data}
    var tmp=Data.split(sp)
    if(tmp.length!=3)
    {if(tmp[0].length!=2 || tmp[1].length!=2)
    {return Data}}
    Rst=tmp[2]+tmp[0]+tmp[1]
    break
    default :
    Rst=UserDefineType(Data,Type)
    if(Rst==null){Rst=Data}
    }
    return Rst
    }
    自己写一个函数把这两个方法加到表头就行了