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.