问使用JavaScript/JQuery，可以根据列的<td>类名对HTML表列(升序/降序)进行排序吗？
EN

Stack Overflow用户

提问于 2016-02-03 07:35:25

回答 2查看 3.9K关注 0票数 0

我目前正在开发一个网页来管理课程数据，它通过XSLT (1.0)和JavaScript (关于客户端方法)的组合动态生成一个HTML。然后用XML文件提供的实时数据填充HTML表。

表：

HTML表包含四个主要列(课程/位置/学分/日期)，每一行的数据都与XML中的一个<Courses>元素相关。

当使用XSLT (1.0)构造Date列的<td>标记时，XSLT代码也会在XML结构中进行查找，并计算出课程的第一个可用<UnitStartDate>，例如，如2016年2月3日，如上图所示。

然后将此<UnitStartDate>解释为YYYYMMDD格式，并在运行时将其分配为类名到日期<td>，因此在前面的示例中，类名为20160203，在HTML中转换为<td class="date 20160203"> 3 Feb 201618 Feb 201624 Feb 2016 </td>。

如果不存在<UnitStartDate>，如“休闲和旅游”课程(Date )的情况，将99999999指定为类名。

HTML:

<table class="upcomingcourses" border="1" style="width: 701px">
<thead>
   <tr>
    <th width="45%">Course</th>
    <th width="15%">Location(s)</th>
    <th width="5%">Credits</th>
    <th width="35%"><a href="javascript:sortTable()">Date(s)</a></th>
   </tr>
</thead>
  <tbody>

 <tr>
    <td class="centerTD">
        <a href="/courses/business-studies.html">Business Studies</a>
    </td>
    <td class="locations">
        <br/>
        <p>B7</p>
        <p>G6</p>
        <br/>
    </td>
    <td class="centerTD">
        <p>30</p>
    </td>
    <td class="date 20160204">
        <p>4 Feb 2016</p>
    </td>
</tr>

<tr>
    <td class="centerTD">
        <a href="/courses/management-studies.html">Management Studies</a>
    </td>
    <td class="locations">
        <br/>
        <p>D8</p>
        <p>F2</p>
        <br/>
    </td>
    <td class="centerTD">
        <p>15</p>
    </td>
    <td class="date 20160101">
        <br/>
        <p>e-Learning: Jan-Feb 2016</p>
        <p>8-12 Feb 2016</p>
        <p>Presentation: 9 Mar 2016</p>
        <br/>
    </td>
</tr>

<tr>
    <td class="centerTD">
        <a href="/courses/leisure-tourism.html">Leisure and Tourism</a>
    </td>
    <td class="locations">
        <br/>
        <p>C5</p>
        <br/>
    </td>
    <td class="centerTD">
        <p>15</p>
        <p>20</p>
    </td>
    <td class="date 99999999">
        <p>TBC</p>
    </td>
</tr>

<tr>
    <td class="centerTD">
        <a href="/courses/mechanical-electrical-eng.html">Mechanical and Electrical Engineering</a>
    </td>
    <td class="locations">
        <br/>
        <p>A3 Workshop</p>
        <br/>
    </td>
    <td class="centerTD">
        <p>15</p>
    </td>
    <td class="date 20160203">
        <br/>
        <p>3 Feb 2016</p>
        <p>18 Feb 2016</p>
        <p>24 Feb 2016</p>
        <br/>
    </td>
</tr>
  </tbody>
</table>

问题：

那么，有了这些背景信息之后，我到底想实现什么呢？嗯，我最终希望能够通过JavaScript或JQuery对四个主表列(升序/降序)中的每一个列进行排序(我对这两个选项都开放)。

从左到右的前三列(课程/地点和学分)非常简单，但是对于第四列，Date(s)，我真的希望能够根据'date‘类名(YYYYMMDD)对列进行排序(从最大到最低，反之亦然)。这个排序过程将通过单击日期<th> (sortTable()函数)中的链接来触发。

正如你可以从机械和电气工程单元中看到的那样，它不仅仅是简单的日期，而且总是包含在其中(关于电子学习的细节等等)。

这种ClassName排序方法可以使用JavaScript实现吗？

从最早的日期(类名)到最近的日期，我希望看到以下内容：

最早的： <td class="date 20160101"> e-Learning: Jan-Feb 20168-12 Feb 2016Presentation: 9 Mar 2016 </td>

<td class="date 20160203"> 3 Feb 201618 Feb 201624 Feb 2016 </td>

<td class="date 20160204">4 Feb 2016</td>

最新版： <td class="date 99999999">TBC</td>

提前谢谢各位。

javascript

jquery

html

sorting

xslt

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-02-03 08:24:39

DOM公开了HTML部分的rows，就像tbody，如果将它们填充到Javascript数组中，那么您可以根据需要对它们进行排序，并且只需要在排序后按正确的顺序对它们进行排序，因为现有子表上的DOM方法会移动它们。

因此，您可以使用Javascript函数，该函数接受单击的单元格，然后对行进行排序：

function sortTable(headerCell) {
  var table = headerCell.parentNode.parentNode.parentNode;
  var colIndex = headerCell.cellIndex;
  var rows = [];
  var tbody = table.tBodies[0];
  if (tbody != null) {
    for (var i = 0; i < tbody.rows.length; i++) {
    	rows.push(tbody.rows[i]);
    }
    if (headerCell.dataset.order == 'ascending') {
    	headerCell.dataset.order = 'descending';
      rows.sort(function(row1, row2) { 
      	return row2.cells[colIndex].classList[1] - row1.cells[colIndex].classList[1];
      });    
    }
    else {
      rows.sort(function(row1, row2) { 
      	headerCell.dataset.order = 'ascending';
      	return row1.cells[colIndex].classList[1] - row2.cells[colIndex].classList[1];
      });
    }
    for (var i = 0; i < rows.length; i++) {
    	tbody.appendChild(rows[i]);
    }
  }
}

.sortable { cursor: pointer; }

<table class="upcomingcourses" border="1" style="width: 701px">
<thead>
   <tr>
    <th width="45%">Course</th>
    <th width="15%">Location(s)</th>
    <th width="5%">Credits</th>
    <th width="35%" class="sortable" data-order="ascending" onclick="sortTable(this);">Date(s)</th>
   </tr>
</thead>
  <tbody>

 <tr>
    <td class="centerTD">
        <a href="/courses/business-studies.html">Business Studies</a>
    </td>
    <td class="locations">
        <br/>
        <p>B7</p>
        <p>G6</p>
        <br/>
    </td>
    <td class="centerTD">
        <p>30</p>
    </td>
    <td class="date 20160204">
        <p>4 Feb 2016</p>
    </td>
</tr>

<tr>
    <td class="centerTD">
        <a href="/courses/management-studies.html">Management Studies</a>
    </td>
    <td class="locations">
        <br/>
        <p>D8</p>
        <p>F2</p>
        <br/>
    </td>
    <td class="centerTD">
        <p>15</p>
    </td>
    <td class="date 20160101">
        <br/>
        <p>e-Learning: Jan-Feb 2016</p>
        <p>8-12 Feb 2016</p>
        <p>Presentation: 9 Mar 2016</p>
        <br/>
    </td>
</tr>

<tr>
    <td class="centerTD">
        <a href="/courses/leisure-tourism.html">Leisure and Tourism</a>
    </td>
    <td class="locations">
        <br/>
        <p>C5</p>
        <br/>
    </td>
    <td class="centerTD">
        <p>15</p>
        <p>20</p>
    </td>
    <td class="date 99999999">
        <p>TBC</p>
    </td>
</tr>

<tr>
    <td class="centerTD">
        <a href="/courses/mechanical-electrical-eng.html">Mechanical and Electrical Engineering</a>
    </td>
    <td class="locations">
        <br/>
        <p>A3 Workshop</p>
        <br/>
    </td>
    <td class="centerTD">
        <p>15</p>
    </td>
    <td class="date 20160203">
        <br/>
        <p>3 Feb 2016</p>
        <p>18 Feb 2016</p>
        <p>24 Feb 2016</p>
        <br/>
    </td>
</tr>
  </tbody>
</table>