摘要:今天遇到了一个问题就是使用原生js对table标签进行排序一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧children的值赋给table

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

原生js实现table的排序代码实例

今天遇到了一个问题就是使用原生js对table标签进行排序

一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧children的值赋给table

但是问题出现了,就是每次操作children的值都没有效果。

最后发现自己走入了一个误区就是想要操作html标签只能通过修改innerHtml来进行操作,操作完innerhtml后children会自动改变

直接上代码吧

HTML代码

     <table>         <thead>             <tr><th>id</th><th>price</th><th>sales</th></tr>         </thead>         <tbody id="jsList">             <tr><td>1</td><td>10.0</td><td>800</td></tr>             <tr><td>2</td><td>30.0</td><td>600</td></tr>             <tr><td>3</td><td>20.5</td><td>700</td></tr>             <tr><td>4</td><td>40.5</td><td>500</td></tr>             <tr><td>5</td><td>60.5</td><td>300</td></tr>             <tr><td>6</td><td>50.0</td><td>400</td></tr>             <tr><td>7</td><td>70.0</td><td>200</td></tr>             <tr><td>8</td><td>80.5</td><td>100</td></tr>         </tbody>     </table>

代码

 function sort(type, order) {     var table = document.getElementById("jsList");     var trArr = table.children;     var intType;     if (type == "id") {         intType = 0;     }     else if (type == "price") {         intType = 1;     }     else if (type == "sales") {         intType = 2;     } var temp     if (order == "asc") {         for (var i = 0; i < trArr.length-1; i++) {             for(j=0;j<trArr.length-i-1;j++){                 if((trArr[j].children[intType].innerHTML-0)>(trArr[j+1].children[intType].innerHTML-0)){                     temp=trArr[j].innerHTML;                     trArr[j].innerHTML=trArr[j+1].innerHTML;                     trArr[j+1].innerHTML=temp;                  }              }          }     } else {         for (var i = 0; i < trArr.length-1; i++) {             for(j=0;j<trArr.length-i-1;j++){                 if((trArr[j].children[intType].innerHTML-0)<(trArr[j+1].children[intType].innerHTML-0)){                     temp=trArr[j].innerHTML;                     trArr[j].innerHTML=trArr[j+1].innerHTML;                     trArr[j+1].innerHTML=temp;                  }              }          }     }  }

原生js实现table的排序代码实例

今天遇到了一个问题就是使用原生js对table标签进行排序

一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧children的值赋给table

但是问题出现了,就是每次操作children的值都没有效果。

最后发现自己走入了一个误区就是想要操作html标签只能通过修改innerHtml来进行操作,操作完innerhtml后children会自动改变

直接上代码吧

HTML代码

     <table>         <thead>             <tr><th>id</th><th>price</th><th>sales</th></tr>         </thead>         <tbody id="jsList">             <tr><td>1</td><td>10.0</td><td>800</td></tr>             <tr><td>2</td><td>30.0</td><td>600</td></tr>             <tr><td>3</td><td>20.5</td><td>700</td></tr>             <tr><td>4</td><td>40.5</td><td>500</td></tr>             <tr><td>5</td><td>60.5</td><td>300</td></tr>             <tr><td>6</td><td>50.0</td><td>400</td></tr>             <tr><td>7</td><td>70.0</td><td>200</td></tr>             <tr><td>8</td><td>80.5</td><td>100</td></tr>         </tbody>     </table>

代码

 function sort(type, order) {     var table = document.getElementById("jsList");     var trArr = table.children;     var intType;     if (type == "id") {         intType = 0;     }     else if (type == "price") {         intType = 1;     }     else if (type == "sales") {         intType = 2;     } var temp     if (order == "asc") {         for (var i = 0; i < trArr.length-1; i++) {             for(j=0;j<trArr.length-i-1;j++){                 if((trArr[j].children[intType].innerHTML-0)>(trArr[j+1].children[intType].innerHTML-0)){                     temp=trArr[j].innerHTML;                     trArr[j].innerHTML=trArr[j+1].innerHTML;                     trArr[j+1].innerHTML=temp;                  }              }          }     } else {         for (var i = 0; i < trArr.length-1; i++) {             for(j=0;j<trArr.length-i-1;j++){                 if((trArr[j].children[intType].innerHTML-0)<(trArr[j+1].children[intType].innerHTML-0)){                     temp=trArr[j].innerHTML;                     trArr[j].innerHTML=trArr[j+1].innerHTML;                     trArr[j+1].innerHTML=temp;                  }              }          }     }  }

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!