jquery: 表1复制到表2,去重复项并排序

来源：互联网发布：精仿苹果6s淘宝网编辑：程序博客网时间：2024/05/23 18:31

[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[html xmlns="http://www.w3.org/1999/xhtml">
[head>
    [title>无标题页[/title>
    [script src="js/jquery-1.4.2.min.js" type="text/javascript">[/script>
    [script src="js/jquery-latest.js" type="text/javascript">[/script>
    [script src="js/jquery.tablesorter.js" type="text/javascript">[/script>
    [script type="text/javascript">
        $(document).ready(function(){
            //切记需要排序的表中一定要有thead
            //$("#Table1").tablesorter({sortList:[[0,0]]});//0为升序    1降。
        });
        //复制表2到表1
        function copy(){
            //setp1
            //注:如不带html则会形成tb2中的内容为空!
            $("#tb1").append($("#tb2").html());
            //step2
            var arr=new Array();
            $("#tb1 tr").each(function(){
                var text = $(this).children("td:first").text();
                if(!arr.in_array(text)){
                    arr.push(text);
                }else{
                    $(this).remove();
                }
            })
            //step3
            $("#Table1").tablesorter({sortList:[[0,0]]});//0为升序    1降。
        }
        //判断元素是否在数组中
        Array.prototype.in_array = function(e)
        {
        for(i=0;i[this.length && this[i]!=e;i++);
        return !(i==this.length);
        }
    [/script>
[/head>
[body>
[input id="Button1" type="button" value="CopyT2ToT1" onclick="copy()" />
[div id="div1">
    [table id="Table1" border="1" style="width:100%;">
        [thead>
        [tr>
            [th>Id[/th>
            [th>Name[/th>
            [th>Address[/th>
        [/tr>
        [/thead>
        [tbody id="tb1">
        [tr>
            [td>11[/td>
            [td>leaf[/td>
            [td>gza[/td>
        [/tr>
        [tr>
            [td>44[/td>
            [td>flower[/td>
            [td>gzb[/td>
        [/tr>
        [tr>
            [td>33[/td>
            [td>flower[/td>
            [td>gzc[/td>
        [/tr>
        [tr>
            [td>33[/td>
            [td>flower[/td>
            [td>gzd[/td>
        [/tr>
        [/tbody>
    [/table>
[/div>
[br />[br />
[div id="div2">
    [table id="Table2" border="1" style="width:100%;">
        [thead>
        [tr>
            [th>Id[/th>
            [th>Name[/th>
            [th>Address[/th>
        [/tr>
        [/thead>
        [tbody id="tb2">
        [tr>
            [td>11[/td>
            [td>leaf[/td>
            [td>gze[/td>
        [/tr>
        [tr>
            [td>5[/td>
            [td>flower[/td>
            [td>gzf[/td>
        [/tr>
        [tr>
            [td>7[/td>
            [td>flower[/td>
            [td>gzg[/td>
        [/tr>
        [tr>
            [td>6[/td>
            [td>flower[/td>
            [td>gzh[/td>
        [/tr>
        [/tbody>
    [/table>
[/div>
[/body>
[/html>