原生js实现table的排序代码实例
程序员文章站
2022-05-02 12:18:11
原生js实现table的排序代码实例
今天遇到了一个问题就是使用原生js对table标签进行排序
一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换c...
原生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; } } } } }