1

我正在尝试使用 tinysort 对我的表客户端进行排序，我也在使用引导程序进行响应，下面是我的表

<table id="issues" class="table table-condensed">
            <thead>
               <tr>
                  <th data-order="asc">#</th>
                  <th data-order="asc" class="hidden-xs">Application</th>
                  <th data-order="asc">Error</th>
                  <th data-order="desc" class="text-right hidden-xs">Occurences</th>
               </tr>
            </thead>
<tbody>
<tr data-id="77">
<td class="id">77</td>
<td class="application hidden-xs">my site is this 1</td>
<td class="message">
<span class="hidden-sm hidden-md hidden-lg small">my site is this 1</span>
<a href="www.google.com">null value returned</a></td>
<td class="occurences hidden-xs text-right">3742</td>
</tr>

<tr data-id="5685">
<td class="id">5685</td>
<td class="application hidden-xs">my site is this 2</td>
<td class="message">
<span class="hidden-sm hidden-md hidden-lg small">my site is this 2</span>
<a href="www.google.com">no value present</a></td>
<td class="occurences hidden-xs text-right">235</td>
</tr>

<tr data-id="547">
<td class="id">547</td>
<td class="application hidden-xs">my site is this 3</td>
<td class="message">
<span class="hidden-sm hidden-md hidden-lg small">my site is this 3</span>
<a href="www.google.com">value returned</a></td>
<td class="occurences hidden-xs text-right">14</td>
</tr>
</tbody>
</table>

下面是我的 Javascript

 var table = document.getElementById('issues')
      ,tableHead = table.querySelector('thead')
      ,tableHeaders = tableHead.querySelectorAll('th')
      ,tableBody = table.querySelector('tbody')
 ;
 tableHead.addEventListener('click',function(e){
    var tableHeader = e.target
        ,textContent = tableHeader.textContent
        ,tableHeaderIndex,isAscending,order
    ;

       while (tableHeader.nodeName!=='TH') {
          tableHeader = tableHeader.parentNode;
       }
       tableHeaderIndex =    Array.prototype.indexOf.call(tableHeaders,tableHeader);
       isAscending = tableHeader.getAttribute('data-order')==='asc';
       order = isAscending?'desc':'asc';
       tableHeader.setAttribute('data-order',order);
       tinysort(
           tableBody.querySelectorAll('tr')
           ,{
              selector:'td:nth-child('+(tableHeaderIndex+1)+')'
               ,order: order
           }
       );
 });

这里的问题是，当我使用“错误”头进行排序时，它会使用 Span 对行进行排序，该跨度对于小型、中型和大型是隐藏的，并且仅在超小型设备中可见。

因此，当我从桌面排序时，它仍然使用该跨度进行排序。

我想要做的是它不应该使用该跨度对其进行排序，但它应该在小型、中型和大型设备中使用链接进行排序，而在超小型设备中使用跨度进行排序。

这是jsfiddle

4

0 回答 0