我有以下代码，我用它来对html表上的列进行排序。它可以按字母顺序排序。当数字是单个数字时，它也可用于排序。
当我尝试对包含货币的列进行排序时，排序功能不会按正确的顺序对数字进行排序。
我需要更改哪些内容才能正确排序货币列？
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>
答案 0 :(得分：1)
我添加了下一个if to extraxt值取决于列
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, ''));
}
我还将[{1}}和x.innerHTML.toLowerCase()替换为y.innerHTML.toLowerCase()和xText，以便根据列轻松更改值
使用yText完成提取浮点值并删除$符号和逗号
希望这就是你要找的东西：）
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
}
答案 1 :(得分：0)
您需要做的就是替换比较逻辑。我冒昧地使用接受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>