javascript列对html表格上的货币进行排序
[英]javascript column sort for currency on html table
问题描述
I have the code below that I'm using to sort the columns on an html table. 
我有下面的代码，用于对html表中的列进行排序。 It works fine for sorting alphabetically. 它可以很好地按字母排序。 It also works for sorting when the numbers are single digit. 当数字为一位数字时，它也可用于排序。
When I try to sort a column that contains a currency then the sort function doesn't sort the numbers in the correct order. 当我尝试对包含货币的列进行排序时，sort函数不会按正确的顺序对数字进行排序。
What would I need to change so it would sort the currency column correctly? 我需要更改什么才能正确地对货币列进行排序？
function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("CarTable"); switching = true; dir = "asc"; while (switching) { switching = false; rows = table.getElementsByTagName("TR"); for (i = 1; i < (rows.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n]; if (dir == "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { shouldSwitch= true; break; } } else if (dir == "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { shouldSwitch= true; break; } } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount ++; } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } }
table { border-spacing: 0; width: 100%; border: 1px solid #ddd; } th { cursor: pointer; } th, td { text-align: left; padding: 16px; } tr:nth-child(even) { background-color: #f2f2f2 }
<html> <head> </head> <body> <table id="CarTable"> <tr> <th onclick="sortTable(0)">Name</th> <th onclick="sortTable(1)">Amount1</th> </tr> <tr> <td>Mustang</td> <td>$2,000.00</td> </tr> <tr> <td>Charger</td> <td>$300.00</td> </tr> <tr> <td>Corvette</td> <td>$225.00</td> </tr> <tr> <td>Firebird</td> <td>$2,600.00</td> </tr> <tr> <td>GTO</td> <td>$260.00</td> </tr> <tr> <td>Camaro</td> <td>$1,000.22</td> </tr> <tr> <td>Barracuda</td> <td>$52.00</td> </tr> <tr> <td>Impala</td> <td>$25.00</td> </tr> </table> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2018-02-14 20:17:12
I added the next if to extraxt the values depending on the column 我添加了下一个if列来取决数值
if (n == 0) {
xText = x.innerHTML.toLowerCase();
yText = y.innerHTML.toLowerCase();
} else {
xText = parseFloat(x.innerHTML.split('$')[1].replace(/,/g, ''));
yText = parseFloat(y.innerHTML.split('$')[1].replace(/,/g, ''));
}
I also replace x.innerHTML.toLowerCase() and y.innerHTML.toLowerCase() for xText and yText this to make an easy change of values depending on the column 我还将x.innerHTML.toLowerCase()和y.innerHTML.toLowerCase()替换为xText和yText ，以便根据列轻松更改值
Finishing with parseFloat(y.innerHTML.split('$')[1].replace(/,/g, '')); 以parseFloat(y.innerHTML.split('$')[1].replace(/,/g, ''));结尾parseFloat(y.innerHTML.split('$')[1].replace(/,/g, '')); to extract the float value and delete both the $ sign and the commas 提取浮点值并删除$符号和逗号
Hope this is what you were looking for :) 希望这就是您想要的:)
function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("CarTable"); switching = true; dir = "asc"; while (switching) { switching = false; rows = table.getElementsByTagName("TR"); for (i = 1; i < (rows.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n]; if (n == 0) { xText = x.innerHTML.toLowerCase(); yText = y.innerHTML.toLowerCase(); } else { xText = parseFloat(x.innerHTML.split('$')[1].replace(/,/g, '')); yText = parseFloat(y.innerHTML.split('$')[1].replace(/,/g, '')); } if (dir == "asc") { if (xText > yText) { shouldSwitch = true; break; } } else if (dir == "desc") { if (xText < yText) { shouldSwitch = true; break; } } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount++; } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } }
table { border-spacing: 0; width: 100%; border: 1px solid #ddd; } th { cursor: pointer; } th, td { text-align: left; padding: 16px; } tr:nth-child(even) { background-color: #f2f2f2 }
<html> <head> </head> <body> <table id="CarTable"> <tr> <th onclick="sortTable(0)">Name</th> <th onclick="sortTable(1)">Amount1</th> </tr> <tr> <td>Mustang</td> <td>$2,000.00</td> </tr> <tr> <td>Charger</td> <td>$300.00</td> </tr> <tr> <td>Corvette</td> <td>$225.00</td> </tr> <tr> <td>Firebird</td> <td>$2,600.00</td> </tr> <tr> <td>GTO</td> <td>$260.00</td> </tr> <tr> <td>Camaro</td> <td>$1,000.22</td> </tr> <tr> <td>Barracuda</td> <td>$52.00</td> </tr> <tr> <td>Impala</td> <td>$25.00</td> </tr> </table> </body> </html>
解决方案2
0 2018-02-14 20:21:56
All you need to do is replace the comparing logic. 您需要做的就是替换比较逻辑。 I took the liberty of changing this part in your code with a function that accepts a mode parameter. 我自由地使用接受mode参数的函数来更改代码中的这一部分。 You can extend it easily. 您可以轻松扩展它。
function sortTable(n,mode) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("CarTable"); switching = true; dir = "asc"; while (switching) { switching = false; rows = table.getElementsByTagName("TR"); for (i = 1; i < (rows.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n]; if (dir == "asc") { if (compareValues(x.innerHTML,y.innerHTML,mode)==1) { shouldSwitch= true; break; } } else if (dir == "desc") { if (compareValues(x.innerHTML,y.innerHTML,mode)==-1) { shouldSwitch= true; break; } } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount ++; } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } function compareValues(x,y,mode){ x = parseValue(x,mode) y = parseValue(y,mode) if(x<y) return -1 if(x>y) return 1 return 0 } function parseValue(val,mode){ switch(mode){ case 'alphabet': return val.toLowerCase() break case 'currency': return parseFloat(val.slice(1).replace(',','')) return } }
table { border-spacing: 0; width: 100%; border: 1px solid #ddd; } th { cursor: pointer; } th, td { text-align: left; padding: 16px; } tr:nth-child(even) { background-color: #f2f2f2 }
<html> <head> </head> <body> <table id="CarTable"> <tr> <th onclick="sortTable(0,'alphabet')">Name</th> <th onclick="sortTable(1,'currency')">Amount1</th> </tr> <tr> <td>Mustang</td> <td>$2,000.00</td> </tr> <tr> <td>Charger</td> <td>$300.00</td> </tr> <tr> <td>Corvette</td> <td>$225.00</td> </tr> <tr> <td>Firebird</td> <td>$2,600.00</td> </tr> <tr> <td>GTO</td> <td>$260.00</td> </tr> <tr> <td>Camaro</td> <td>$1,000.22</td> </tr> <tr> <td>Barracuda</td> <td>$52.00</td> </tr> <tr> <td>Impala</td> <td>$25.00</td> </tr> </table> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.