jquery操作table操作

来源：互联网发布：软件研发立项报告模板编辑：程序博客网时间：2024/04/20 05:44

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>js操作刷新</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8" ;>
<META content=360doc name=classification>
<META content=js操作刷新 name=keywords>
<META content=js操作刷新 name=description>
<script language="javaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<SCRIPT>

//--------------------- 排序
//需要在排序的table上加id="tableNeed",需在排序的列上加onclick="sortt('.?')",在此列所有<td>上加class="?"
    function sortt(className){
    var listName=new Array();
    var listNameOld=new Array();
    var listTr=new Array();
    var listSort=new Array();
    var i=1;
    var b=false;

    //取得原来的<tr>,并清空<table>
        $("#tableNeed tr").each(function(){
            listTr.push($(this).html());
        });

    //得到要排列的列的元素，并在末尾追加此刻的顺序（从1开始）
        $(className).each(function(){
            listName.push($(this).text()+i);
            listNameOld.push($(this).text()+i);
            i++;
        });

        //将要排序的元素排序
        mySort(listName);

        //判断排序后元素位置是否发生变化
        for(var j=0;j<listName.length;j++){
            if(listName[j].substring(listName[j].length-listNameOld[j].length)!=listNameOld[j]){
                b=true;
                break;
            }
        }

        //排序后，根据先前追加的顺序得到此时<tr>的顺序
            for(var j=0;j<listName.length;j++){
                listSort.push(parseInt(listName[j].substring(listName[j].length-1)));
            }


        $("#tableNeed").html('');
        //按顺序追加<tr>，若排序后元素顺序未变化，则倒序追加
        $("#tableNeed").append("<tr class='header'>"+listTr[0]+"</tr>");
        if(b){
            for(var j=0;j<listSort.length;j++){
                $("#tableNeed").append("<tr>"+listTr[listSort[j]]+"</tr>");
            }
        }else{
            for(var j=listSort.length-1;j>=0;j--){
                $("#tableNeed").append("<tr>"+listTr[listSort[j]]+"</tr>");
            }
        }
    }

    //首先按字符个数排序，然后按相对应的字符大小排序
    function mySort(list){
        var len=0;
        var add="";
        for(var i=0;i<list.length;i++){
            var str=list[i];
            if(str.length>len){
                len=str.length;
            }
        }

        for(var i=0;i<len;i++){
            add+="0"
        }

        for(var i=0;i<list.length;i++){
            var strOne=add+list[i];
            list[i]=strOne.substring(strOne.length-len);
        }
        list.sort();
    }
    //----------------------------

</SCRIPT>
<BODY>
<TABLE id="tableNeed" border=1>
<tr><td onclick="sortt('.1')">数字</td><td onclick="sortt('.2')">字母</td><td onclick="sortt('.3')">数字字母</td></tr>
<tr><td class="1">123</td><td class="2">asd</td><td class="3">234</td></tr>
<tr><td class="1">345</td><td class="2">wedw</td><td class="3">wedw</td></tr>
<tr><td class="1">242135</td><td class="2">sdfr</td><td class="3">3e</td></tr>
<tr><td class="1">234</td><td class="2">weff</td><td class="3">a3</td></tr>
<tr><td class="1">1</td><td class="2">s</td><td class="3">2</td></tr>
<tr><td class="1">54</td><td class="2">e</td><td class="3">e</td></tr>
<tr><td class="1">234</td><td class="2">w</td><td class="3">4</td></tr>
<tr><td class="1">435</td><td class="2">a</td><td class="3">f</td></tr>
<tr><td class="1">23</td><td class="2">b</td><td class="3">6</td></tr>
</table>
</BODY></HTML>