我有一個表格,它通過點擊一個標題來工作,然後每次單擊標題時按照升序和降序對列進行排序。它按字母順序對所有內容進行排序,但我需要它也能夠按數字排序。使用Javascript按數字和字母順序排序表格
它似乎工作,直到數字超出同一列內的單個數字。
這是HTML代碼:(忽略NFL內容,它只是數據來測試此表)
<div id="supAll">
<table border="1" class="supTable">
<tr>
<th onclick="sortTable('supTable', 0)">Team</th>
<th onclick="sortTable('supTable', 1)">SB Wins</th>
<th onclick="sortTable('supTable', 2)">SB Losses</th>
<th onclick="sortTable('supTable', 3)">Last Won</th>
</tr>
<tr class="nfc nfcWest">
<td>Arizona Cardinals</td>
<td>0</td>
<td>1</td>
<td>-</td>
</tr>
<tr class="nfc nfcSouth">
<td>Atlanta Falcons</td>
<td>10</td>
<td>2</td>
<td>-</td>
</tr>
<tr class="afc afcNorth">
<td>Baltimore Ravens</td>
<td>2</td>
<td>0</td>
<td>2012</td>
</tr>
<tr class="afc afcEast">
<td>Buffalo Bills</td>
<td>11</td>
<td>4</td>
<td>-</td>
</tr>
<tr class="nfc nfcSouth">
<td>Carolina Panthers</td>
<td>22</td>
<td>2</td>
<td>-</td>
</tr>
<tr class="nfc nfcNorth">
<td>Chicago Bears</td>
<td>1</td>
<td>1</td>
<td>1985</td>
</tr>
<tr class="afc afcNorth">
<td>Cincinnati Bengals</td>
<td>0</td>
<td>2</td>
<td>-</td>
</tr>
<tr class="afc afcNorth">
<td>Cleveland Browns</td>
<td>0</td>
<td>0</td>
<td>-</td>
</tr>
<tr class="nfc nfcEast">
<td>Dallas Cowboys</td>
<td>5</td>
<td>3</td>
<td>1995</td>
</tr>
<tr class="afc afcWest">
<td>Denver Broncos</td>
<td>3</td>
<td>5</td>
<td>2015</td>
</tr>
<tr class="nfc nfcNorth">
<td>Detroit Lions</td>
<td>0</td>
<td>0</td>
<td>-</td>
</tr>
<tr class="nfc nfcNorth">
<td>Green Bay Packers*</td>
<td>4</td>
<td>1</td>
<td>2010</td>
</tr>
<tr class="afc afcSouth">
<td>Houston Texans</td>
<td>0</td>
<td>0</td>
<td>-</td>
</tr>
<tr class="afc afcSouth">
<td>Indianapolis Colts</td>
<td>2</td>
<td>2</td>
<td>2006</td>
</tr>
<tr class="afc afcSouth">
<td>Jacksonville Jaguars</td>
<td>0</td>
<td>0</td>
<td>-</td>
</tr>
<tr class="afc afcWest">
<td>Kansas Chiefs*</td>
<td>1</td>
<td>1</td>
<td>1969</td>
</tr>
<tr class="afc afcWest">
<td>Los Angeles Chargers</td>
<td>0</td>
<td>1</td>
<td>-</td>
</tr>
<tr class="nfc nfcWest">
<td>Los Angeles Rams</td>
<td>1</td>
<td>2</td>
<td>1999</td>
</tr>
<tr class="afc afcEast">
<td>Miami Dolphins</td>
<td>2</td>
<td>3</td>
<td>1973</td>
</tr>
<tr class="nfc nfcNorth">
<td>Minnesota Vikings</td>
<td>0</td>
<td>4</td>
<td>-</td>
</tr>
<tr class="afc afcEast">
<td>New England Patriots</td>
<td>5</td>
<td>4</td>
<td>2016</td>
</tr>
<tr class="nfc nfcSouth">
<td>New Orleans Saints</td>
<td>1</td>
<td>1</td>
<td>2009</td>
</tr>
<tr class="nfc nfcEast">
<td>New York Giants</td>
<td>4</td>
<td>1</td>
<td>2011</td>
</tr>
<tr class="afc afcEast">
<td>New York Jets*</td>
<td>1</td>
<td>0</td>
<td>1968</td>
</tr>
<tr class="afc afcWest">
<td>Oakland Raiders</td>
<td>3</td>
<td>2</td>
<td>1983</td>
</tr>
<tr class="nfc nfcEast">
<td>Philadelphia Eagles</td>
<td>0</td>
<td>2</td>
<td>-</td>
</tr>
<tr class="afc afcNorth">
<td>Pittsburgh Steelers</td>
<td>6</td>
<td>2</td>
<td>2008</td>
</tr>
<tr class="nfc nfcWest">
<td>San Francisco 49ers</td>
<td>5</td>
<td>5</td>
<td>1994</td>
</tr>
<tr class="nfc nfcWest">
<td>Seattle Seahawks</td>
<td>1</td>
<td>2</td>
<td>2013</td>
</tr>
<tr class="nfc nfcSouth">
<td>Tampa Bay Buccaneers</td>
<td>1</td>
<td>0</td>
<td>2002</td>
</tr>
<tr class="afc afcSouth">
<td>Tennessee Titans</td>
<td>0</td>
<td>1</td>
<td>-</td>
</tr>
<tr class="nfc nfcEast">
<td>Washington Redskins</td>
<td>3</td>
<td>2</td>
<td>1991</td>
</tr>
</table>
</div>
</div>
及以下這裏是Javascript代碼:
function sortTable(tableClass, n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementsByClassName(tableClass)[0];
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;
}
}
}
}
如果您運行代碼,您可以在中間欄中看到有不同大小的數字的代碼,但它不會正確地對它們進行排序。
有沒有什麼方法可以使用這個代碼/函數,以便我的表格可以按字母順序和數字順序排序(當它高於單個數字時)?如果沒有人可以幫助我解決這個問題。
編輯 - 這已經解決了!如果您查看Hendeca下面的代碼和Teldri,您將看到解決的代碼。他們的兩個版本都有效。
嗨,這個偉大的作品整理我的數字列,但它阻止我能夠按字母順序排序我的第一列。現在只有數字可以被排序。 – bevstar7
正如stevelacerda7所解釋的那樣,您可以檢查parseInt是否導致NaN,並在此情況下執行正常的字符串比較。 – teldri
我該怎麼做? – bevstar7