Question

我目前正在开发一个网页来管理课程数据，该网页通过 XSLT（1.0）和 JavaScript （{{的组合动态生成HTML表格3}}）。然后使用XML文件提供的实时数据填充HTML表。

表：

HTML表包含四个主要栏目（课程 / 位置 / 积分 / 日期），每行的数据与XML文件中的<Courses>元素相关。

当 Date（s）列的<td>标签是通过XSLT（1.0）构建的时，XSLT代码也会在XML结构中查找并完成课程的第一个可用<UnitStartDate>，例如机械和电气工程将 2016年2月3日，如上图所示。

然后，此<UnitStartDate>被解释为YYYYMMDD格式，并在运行时分配为日期<td>的类名，因此在我们之前的示例中，类名称为 20160203 ，在我们的HTML标记中翻译为<td class="date 20160203"> 3 Feb 201618 Feb 201624 Feb 2016 </td>。

如果不存在<UnitStartDate>，就像“休闲和旅游”课程（日期TBC）一样， 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对四个主表列（升序/降序）中的每一个进行排序（我对这两个选项都是开放的）。

从左到右（课程 / 位置和 Credits ）的前三列很简单，但对于第四列， Date（s），我真的希望能够根据我的'date'类名依次对列进行排序（最大数量到最低数量，反之亦然） YYYYMMDD）即可。单击日期<th>（sortTable()函数）中的链接即可触发此排序过程。

正如您从机械和电气工程单元中看到的那样，它不仅仅是简单明了的日期（有关电子学习等的详细信息）。

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

有了最新的最早日期（班级名称），我希望看到以下内容：

最早： <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>

<小时/> 提前谢谢大家。

Answer 1

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

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

appendChild

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; }

Answer 2

您可以使用Array.sort在javascript中订购记录，然后从表中删除未分类的记录，并使用jQuery.append添加排序。

或者您可以使用insertBefore功能更改记录的顺序。

使用JavaScript / JQuery，您可以根据列的类名对HTML表列（升序/降序）进行排序吗？

2 个答案: