Fatal编程技术网
  • javascript/
  • 使用JavaScript/JQuery，可以根据列’；s<；td>；班名？

使用JavaScript/JQuery，可以根据列’；s<；td>；班名？

javascript jquery html sorting xslt

使用JavaScript/JQuery，可以根据列’；s<；td>；班名？,javascript,jquery,html,sorting,xslt,Javascript,Jquery,Html,Sorting,Xslt,我目前正在开发一个管理课程数据的网页，该网页通过XSLT（1.0）和JavaScript（）的组合动态生成一个HTML表。然后用XML文件提供的实时数据填充HTML表 表格： <table class="upcomingcourses" border="1" style="width: 701px"> <thead> <tr> <th width="45%">Course</th> <th width="15

我目前正在开发一个管理课程数据的网页，该网页通过XSLT（1.0）和JavaScript（）的组合动态生成一个HTML表。然后用XML文件提供的实时数据填充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>
HTML表包含四个主列（课程/地点/学分/日期），每一行的数据都与XML文件中的
元素相关

当通过XSLT（1.0）构造日期列的
标记时，XSLT代码也会在XML结构中查找，并计算出课程的第一个可用
，例如，机械和电气工程将在2016年2月3日，如上图所示

然后将该
解释为YYYYMMDD格式，并在运行时将其指定为类名，直到日期
，因此在我们前面的示例中，类名将是20160203，在HTML标记中转换为

2016年2月3日2016年2月18日2016年2月24日

如果不存在
，如“休闲与旅游”课程（日期待定），则将9999999指定为类名

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>  




课程
地点(s)
信用


B7

G6



三十

2016年2月4日



D8

F2



十五



电子学习：2016年1-2月

2016年2月8日至12日

陈述：2016年3月9日





碳五



十五

二十

待定



A3工作坊



十五



2016年2月3日

2016年2月18日

2016年2月24日





问题：


<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对四个主表列中的每一列进行排序（升序/降序）（我对这两个选项都持开放态度）

从左到右的前三列（课程/地点和学分）足够简单，但对于第四列（日期），我确实希望能够根据我的“日期”类名（YYYYMMDD）对列进行排序（从大到小，反之亦然）。单击日期
（
sortTable（）
函数）中的链接将触发此排序过程

正如你从机电工程单元中所看到的，它不仅仅是包含了简单的日期（关于电子学习等的详细信息）

这种
ClassName
排序方法是否可以使用JavaScript实现

从最早的日期（类名）到最晚的日期，我希望看到以下内容：



最早：电子学习：2016年1-2月



2016年2月3日
2016年2月18日
2016年2月24日



2016年2月4日

最新版本：
TBC




提前感谢大家。
您可以使用javascript对记录进行排序，然后从表中删除未排序的记录并添加排序的记录


或者您可以使用函数更改记录的顺序。
您可以使用javascript对记录进行排序，然后从表中删除未排序的记录并添加排序的记录


或者您可以使用函数来更改记录的顺序。
DOM公开HTML表节的
行
，如
tbody
，如果您将它们填充到Javascript数组中，那么您可以根据需要对它们进行排序，只需在排序后对它们进行
appendChild
即可，当现有子对象上的DOM方法移动它们时

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



功能排序表（headerCell）{
var table=headerCell.parentNode.parentNode.parentNode；
var colIndex=headerCell.cellIndex；
var行=[]；
var-tbody=table.tBodies[0]；
if（tbody！=null）{
对于（变量i=0；i


.sortable{cursor:pointer；}



课程
地点(s)
信用
日期


B7

G6



三十

2016年2月4日



D8

F2



十五



电子学习：2016年1-2月

2016年2月8日至12日

陈述：2016年3月9日





碳五



十五

二十