问题描述
这个是对表格的排序功能，再不重新加载的情况下实现点击title就能对表格重新排序，我新弄了个testtable的表，想在重绘表格的时候也把内容复制到testtable里面去，但是却不行，大家注意下标注的两句，交换下位置表现就不一样了，请高手赐教啊！！！！另外其中标注的3这句，get()方法到底做了什么还是不太清楚啊。。。rows是不是一个关联数组了？以下是代码，请高手帮忙哈~~~偶系菜鸟<html><head><title>Sortandpage</title><scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript">functionshowarr(arr){varrsl;for(vari=0;i<arr.length;i++){rsl+=arr[i]+",";}returnrsl;}$(document).ready(function(){$('#testarraya').click(function(){vararr=[52,9,3,48,76,35];arr.sort(function(a,b){if(a<b){return-1;}if(a>b){return1;}return0;});varstr=arr.join(',');//document.write(html);$('#result').append(str);returnfalse;});$(document).ready(function(){$('table.sortable').each(function(){var$table=$(this);$('th',$table).each(function(column){var$header=$(this);if($header.is('.sort-alpha')){$header.addClass('clickable').hover(function(){$header.addClass('hover');},function(){$header.removeClass('hover');}).click(function(){varrows=$table.find('tbody>tr').get();//--------------------3rows.sort();$.each(rows,function(index,row){$('#testtable').children('tbody').append(row);//-----------------------1$table.children('tbody').append(row);//-----------------------2});returnfalse;});}});});});$(document).ready(function(){$('table.sortabletbodytr:odd').addClass('odd');$('table.sortabletbodytr:even').addClass('even');});});</script><style>.sortable{font-size:12pt;font-family:Verdana;color:#ccc;}.sortablethead{font-size:12pt;font-family:Verdana;color:black;}div.wrapper{background-color:#FF0000;}.sortable{border:#ccc1pxsolid;}TRTD{border:#ccc1pxsolid;}TRTH{border:#ccc1pxsolid;}.odd{background-color:green;}.even{background-color:#FF0000;}</style></head><body><divclass="testarray"><divclass="testarray"id="testarray"><h3><ahref="#">testarraysort</a></h3></div><divclass="getable"><divclass="getable"id="getable"><h3><ahref="#">Clicktitletogettable</a></h3></div><divid="result"><tableid="testtable"><tbody></tbody></table></div><divid="mytable"><tableclass="sortable"><thead><tr><th></th><thclass="sort-alpha">Title</th><th>Author(s)</th><th>PublishDate</th><th>Price</th></tr></thead><tbody><tr><td><imgsrc="../images/covers/small/11.png"width=49height=61alt="BuildingWebsiteswithJoomla"/><td>BuildingWebsiteswithJoomla!1.5Beta1</td><td>HagenGraf</td><td>Feb2007</td><td>$40.49</td></tr><tr><td><imgsrc="../images/covers/small/11.png"width=49height=61alt="LearningMambo:Astep-by-stepTutorialtoBuildingYourWebsite"/><td>LearningMambo:Astep-by-stepTutorialtoBuildingYourWebsite</td><td>DouglasPaterson</td><td>Dec2006</td><td>$40.49</td></tr><tr><td><imgsrc="../images/covers/small/11.png"width=49height=61alt="MoodleE-LearningCourseDevelopment"/><td>MoodleE-LearningCourseDevelopment</td><td>WilliamRice</td><td>May2006</td><td>$35.09</td></tr><tr><td><imgsrc="../images/covers/small/11.png"width=49height=61alt="AjaxandPHP:BuildingResponsiveWebApplications"/><td>AjaxandPHP:BuildingResponsiveWebApplications</td><td>CristianDarie,MihaiBucica</td><td>May2006</td><td>$31.49</td></tr><tr><td><imgsrc="../images/covers/small/11.png"width=49height=61alt="OpenVPN:BuildingandIntegratingVirtualPrivatgeNetworks"/><td>OpenVPN:BuildingandIntegratingVirtualPrivatgeNetworks</td><td>MarkusFeilner</td><td>May2006</td><td>$53.99</td></tr></div></body></html>
解决方案
解决方案二：
你的问题主要有以下几个方面：1.rows.sort();此方法需提供一个排序的方法，类似你前面的数组排序。2.$table.children('tbody').append(row);//-----------------------2这行是多余的，加入到testtable，又加回来了，所以感觉页面没动。需去掉。标注的3这句，get()方法是将jquery的Row对象转换为dom对象。实现原样贴合，自己试一下。<html><head><title>Sortandpage</title><scripttype="text/javascript"src="jquery-1.4.4.js"></script><scripttype="text/javascript">functionshowarr(arr){varrsl;for(vari=0;i<arr.length;i++){rsl+=arr[i]+",";}returnrsl;}$(document).ready(function(){$('#testarraya').click(function(){vararr=[52,9,3,48,76,35];arr.sort(function(a,b){if(a<b){return-1;}if(a>b){return1;}return0;});varstr=arr.join(',');//document.write(html);$('#result').append(str);returnfalse;});$(document).ready(function(){$('table.sortable').each(function(){var$table=$(this);$('th',$table).each(function(column){var$header=$(this);varcol=1;if($header.is('.sort-alpha')){$header.addClass('clickable').hover(function(){$header.addClass('hover');},function(){$header.removeClass('hover');}).click(function(){varrows=$table.find('tbody>tr').get();//--------------------3rows.sort(function(a,b){varcompA=$(a).find("td:eq("+col+")").text();varcompB=$(b).find("td:eq("+col+")").text();return(compA>compB)?1:-1;});$.each(rows,function(index,row){$('#testtable').children('tbody').append(row);//-----------------------1//$table.children('tbody').append(row);//-----------------------2});returnfalse;});}});});});$(document).ready(function(){$('table.sortabletbodytr:odd').addClass('odd');$('table.sortabletbodytr:even').addClass('even');});});</script><style>.sortable{font-size:12pt;font-family:Verdana;color:#ccc;}.sortablethead{font-size:12pt;font-family:Verdana;color:black;}div.wrapper{background-color:#FF0000;}.sortable{border:#ccc1pxsolid;}TRTD{border:#ccc1pxsolid;}TRTH{border:#ccc1pxsolid;}.odd{background-color:green;}.even{background-color:#FF0000;}</style></head><body><divclass="testarray"><divclass="testarray"id="testarray"><h3><ahref="#">testarraysort</a></h3></div><divclass="getable"><divclass="getable"id="getable"><h3><ahref="#">Clicktitletogettable</a></h3></div><divid="result"><tableid="testtable"><tbody></tbody></table></div><divid="mytable"><tableclass="sortable"><thead><tr><th></th><thclass="sort-alpha">Title</th><th>Author(s)</th><th>PublishDate</th><th>Price</th></tr></thead><tbody><tr><td><imgsrc="../images/covers/small/11.png"width=49height=61alt="BuildingWebsiteswithJoomla"/><td>BuildingWebsiteswithJoomla!1.5Beta1</td><td>HagenGraf</td><td>Feb2007</td><td>$40.49</td></tr><tr><td><imgsrc="../images/covers/small/11.png"width=49height=61alt="LearningMambo:Astep-by-stepTutorialtoBuildingYourWebsite"/><td>LearningMambo:Astep-by-stepTutorialtoBuildingYourWebsite</td><td>DouglasPaterson</td><td>Dec2006</td><td>$40.49</td></tr><tr><td><imgsrc="../images/covers/small/11.png"width=49height=61alt="MoodleE-LearningCourseDevelopment"/><td>MoodleE-LearningCourseDevelopment</td><td>WilliamRice</td><td>May2006</td><td>$35.09</td></tr><tr><td><imgsrc="../images/covers/small/11.png"width=49height=61alt="AjaxandPHP:BuildingResponsiveWebApplications"/><td>AjaxandPHP:BuildingResponsiveWebApplications</td><td>CristianDarie,MihaiBucica</td><td>May2006</td><td>$31.49</td></tr><tr><td><imgsrc="../images/covers/small/11.png"width=49height=61alt="OpenVPN:BuildingandIntegratingVirtualPrivatgeNetworks"/><td>OpenVPN:BuildingandIntegratingVirtualPrivatgeNetworks</td><td>MarkusFeilner</td><td>May2006</td><td>$53.99</td></tr></div></body></html>
解决方案三：
如果我设置了$row='<tr><td><imgsrc="../images/covers/small/11.png"width=49height=61alt="BuildingWebsiteswithJoomla"/><td>ThenewbookwritenbyDreamcast</td><td>Dreamcast</td><td>Feb2007</td><td>$30.49</td>';那么我执行$('#tabletbody').append($row)得到的结果是表格多了一行，但是在排序的时候使用append，得到的结果全是表格重新被描绘了，并没有增加几行，这是为什么？