jquery: 表1复制到表2,去重复项并排序-优快云博客

本文介绍了一种使用jQuery实现的表格数据复制方法，并通过JavaScript实现了去除重复项的功能。具体步骤包括：从一个表格（表2）复制所有数据到另一个表格（表1），然后检查表1中的每一行数据，如果发现重复的Id，则移除该行，最后对表1进行排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[!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>