脚本宝典收集整理的这篇文章主要介绍了js实例教程-原生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标签进行排序
一开始的时候陷入了一个误区就是首先获取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技巧,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的js实例教程-原生js实现table的排序代码实例全部内容,希望文章能够帮你解决js实例教程-原生js实现table的排序代码实例所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。