javascript列对html表格上的货币进行排序
[英]javascript column sort for currency on html table
问题描述
我有下面的代码，用于对html表中的列进行排序。 它可以很好地按字母排序。 当数字为一位数字时，它也可用于排序。
当我尝试对包含货币的列进行排序时，sort函数不会按正确的顺序对数字进行排序。
我需要更改什么才能正确地对货币列进行排序？
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
我添加了下一个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, ''));
}
我还将x.innerHTML.toLowerCase()和y.innerHTML.toLowerCase()替换为xText和yText ，以便根据列轻松更改值
以parseFloat(y.innerHTML.split('$')[1].replace(/,/g, ''));结尾parseFloat(y.innerHTML.split('$')[1].replace(/,/g, '')); 提取浮点值并删除$符号和逗号
希望这就是您想要的:)
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
您需要做的就是替换比较逻辑。 我自由地使用接受mode参数的函数来更改代码中的这一部分。 您可以轻松扩展它。
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>
仅使用javaScript按日期值desc按列对HTML中的表进行排序
[英]Sort table in HTML by column with date values desc using only javaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.