我有以下代码表,其中列出了日期和事件。
如果单击表格标题,排序功能将起作用。
我需要能够按照“从最旧到最新”的正确顺序对日期进行排序并反向。 但是,如果我现在排序,它会先排序日期,然后是月份,然后是年份。这需要首先排序YYYY,然后是MM,然后是DD。
<table id="paleBlueRows" class="paleBlueRows">
<thead><tr>
<th onclick="sortTable(0)">Date</th>
<th onclick="sortTable(0)">Source</th>
<th onclick="sortTable(0)">Event</th>
<th onclick="sortTable(0)">News</th>
</tr></thead>
<script>
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("paleBlueRows");
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;
}
}
}
}
</script>
答案 0 :(得分:1)
我对您的HTML代码进行了一些修改,以摆脱内联样式和事件处理程序
已重写function sortTable
以处理具有任意列数的任何表。嵌套的function typed
处理针对您的情况优化的字符串到日期转换(如有必要)。
function sortTable(e) {
var th = e.target;
if (th.nodeName.toLowerCase() !== 'th') return true;
var n = 0; while (th.parentNode.cells[n] != th) ++n;
var order = th.order || 1; th.order = -order;
var t = this.querySelector('tbody');
t.innerHTML = Object.keys(t.rows)
.filter(k => !isNaN(k))
.map(k => t.rows[k])
.sort((a, b) => order * (typed(a) > typed(b) ? 1 : -1))
.map(r => r.outerHTML)
.join('');
function typed(tr) {
var s = tr.cells[n].innerText;
var d = Date.parse(s.replace(/^(\d{1,2})st|th/, '$1'))
return isNaN(d) ? s.toLowerCase() : d;
}
}
document.querySelector('#paleBlueRows')
.addEventListener('click', sortTable, false);
table.paleBlueRows {
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #fff;
width: 90%;
height: 200px;
margin: 0 auto;
text-align: center;
border-collapse: collapse;
}
table.paleBlueRows td, table.paleBlueRows th {
border: 1px solid #fff;
padding: 3px 2px;
width: 12%;
}
table.paleBlueRows tbody td {
font-size: 13px;
}
table.paleBlueRows tr:nth-child(even) {
background: #D0E4F5;
}
table.paleBlueRows thead {
background: #0B6FA4;
border-bottom: 5px solid #fff;
}
table.paleBlueRows thead th {
font-size: 17px;
font-weight: bold;
color: #fff;
text-align: center;
border-left: 2px solid;
}
table.paleBlueRows thead th:first-child {
border-left: none;
}
table.paleBlueRows tbody td:first-child {
font-weight: bold;
}
table.paleBlueRows tfoot td {
font-size: 14px;
}
<table id="paleBlueRows" class="paleBlueRows">
<thead>
<tr>
<th>Date</th>
<th>Source</th>
<th>Event</th>
<th>News</th>
</tr>
</thead>
<tbody>
<tr>
<td>27th October 2016</td>
<td>WWE.COM</td>
<td>WrestleMania</td>
<td>Packages announced</td>
</tr>
<tr>
<td>27th October 2016</td>
<td>WWE.COM</td>
<td>WrestleMania</td>
<td>Tickets announced</td>
</tr>
<tr>
<td>31st October 2016</td>
<td>WWE.COM</td>
<td>WrestleMania</td>
<td>Packages On-Sale</td>
</tr>
<tr>
<td>15th November 2016</td>
<td>FACEBOOK</td>
<td>RAW</td>
<td>RAW Tickets On-Sale</td>
</tr>
<tr>
<td>15th November 2016</td>
<td>FACEBOOK</td>
<td>SmackDown</td>
<td>SmackDown Tickets On-Sale</td>
</tr>
<tr>
<td>20th January 2017</td>
<td>WWE.COM</td>
<td>NXT</td>
<td>NXT Tickets On-Sale</td>
</tr>
<tr>
<td>20th January 2017</td>
<td>WWE.COM</td>
<td>Hall of Fame</td>
<td>Hall of Fame Tickets on sale</td>
</tr>
<tr>
<td>27th February 2017</td>
<td>WWE.COM</td>
<td>WrestleMania</td>
<td>WrestleMania Packages Shipped</td>
</tr>
<tr>
<td>16th October 2017</td>
<td>WWE.COM</td>
<td>WrestleMania</td>
<td>Packages announced</td>
</tr>
<tr>
<td>16th October 2017</td>
<td>WWE.COM</td>
<td>WrestleMania</td>
<td>Tickets announced</td>
</tr>
<tr>
<td>30th October 2017</td>
<td>WWE.COM</td>
<td>WrestleMania</td>
<td>Packages On-Sale</td>
</tr>
<tr>
<td>17th November 2017</td>
<td>WWE.COM</td>
<td>WrestleMania</td>
<td>WrestleMania Tickets On-Sale</td>
</tr>
</tbody>
</table>
尝试自己:改进代码以处理任何数据类型:日期,数字,字符串。