（js）表格正逆序排列
来源：互联网 发布：全国学校数据库 编辑：程序博客网 时间：2024/05/10 00:51
<!DOCTYPE html><html><head><title>表格正逆序排列</title><meta charset="utf-8"><style type="text/css">table{width:400px;height:200px;border:1px solid #000;border-collapse:collapse;position:relative;/*这里有没有position达到的效果都一样*/}th,td{width:25%;height:20%;border:1px solid #000;}th{background-color:grey;}</style></head><body><table id="table"> <!--id的取名可以与标签名相同 --><thead><tr><th>姓名</th><th>力量</th><th>敏捷</th><th>智力</th></tr></thead><tbody><tr><td>d德鲁伊</td><td>17</td><td>24</td><td>13</td></tr><tr><td>y月之骑士</td><td>15</td><td>22</td><td>16</td></tr><tr><td>z众神之王</td><td>19</td><td>15</td><td>20</td></tr><tr><td>l流浪剑客</td><td>23</td><td>15</td><td>14</td></tr></tbody></table><script type="text/javascript">var table = document.getElementById("table");//变量的取名可以与html中标签名相同，是Id而不是ID
var th = table.getElementsByTagName("th");//取得标题 table.getElementByTagName与document.效果是一样的，为了更好的扩展性，这里用table.
var tb = table.getElementsByTagName("tbody")[0];var tbTr = tb.getElementsByTagName("tr");//取得表格中的每一行。因为后面需要一行行的复制//getElementById 的Element没有s, getElementsbyTagName的Elements有s
function sortTable(_i){//使用_i是为了区别ith[_i].onclick = function(){//只有点击后才执行以下内容var selectCol=[]; //把选定的列存入此数组中,存的是内容var copytr=[];//把需要排列的表格数据复制到此数组中，存的是节点for(var j=0; j<tbTr.length; j++){selectCol.push(tbTr[j].getElementsByTagName("td")[_i].innerText);copytr.push(tbTr[j].cloneNode(true));//cloneNode() 方法克隆所有属性以及它们的值。}//排序if(!isSort[_i]){isSort[_i]=true;var t=parseInt(selectCol[0]) || selectCol[0];//有可能是字符串型的数字if(typeof(t)=='number'){ //判断为数字还是字符串,typeof的of为小写,selectCol.sort(function(a,b){return(a-b)});}else{selectCol.sort();}//并不是按照拼音排序}else{isSort[_i]=false;selectCol.reverse();}console.log(selectCol);//清空原tbvar tbTrlength=tbTr.length;//必须要这一行，因为tbTr.length会随着删除而改变for(var k=0;k<tbTrlength;k++){tb.removeChild(tbTr[0]);//总共要删除tbTr.length-1行，删除一行少一行，所以每次删的都是【0】行}console.log(tb);//重新给tb添加排序好的内容for(var x=0;x<selectCol.length;x++){for(var y=0;y<copytr.length;y++){if(selectCol[x]==copytr[y].getElementsByTagName("td")[_i].innerHTML){tb.appendChild(copytr[y]);}}} }}var isSort=[];for(var i=0; i<th.length; i++){isSort[i]=false; //设置标志，用来判断是正序还是逆序排列sortTable(i);//调用sortTable}</script></body></html>
0 0
