javascript - Th 不会在某些修改的列上对 Tbody 进行排序

Question

我在一个表中有多个tbody，其中一些跨越列和行。然后我得到了一个 jQuery 代码，根据 th.data 单击对这个 tbody 进行排序。

在第一个th列中，单击它会正确排序。然而，在第二个th列中，当单击它时，它不会对tbody进行排序。

这是片段:

var table = $('table'),
    th = table.find('thead th'),
    tbody = table.find('tbody');


$(th).on('click', function() {
    
    $(th).removeClass();
    
    var index = this.cellIndex,
        sortType = $(this).data('sort'),
        sortDir  = $(this).data('dir') || 'asc';
    

		var that = $(this);

    $('table').find('tbody').slice().sort(function(a, b) {
    
    		var dataTH = that.data('class'); 
        
        //alert(dataTH);
    
    		if(dataTH == 'number')
        	{
            //alert("hi this is a number");
            var aText = $(a).find('td.sortNum:eq(' + index + ')').text(),
                bText = $(b).find('td.sortNum:eq(' + index + ')').text();          
          }
          
    		else if(dataTH == 'department')
        	{
            //alert("hi this is a department");
            var aText = $(a).find('td.depart:eq(' + index + ')').text(),
                bText = $(b).find('td.depart:eq(' + index + ')').text();          
          }
    
            if (sortDir == 'desc') {
                temp = aText;
                aText = bText;
                bText = temp;
            }
            
            if (sortType == 'string') {
                return aText.localeCompare(bText);    
            }

						else {
                return +aText - +bText;
            }
        })
        .appendTo('table');

    $(this).data('dir', sortDir == 'asc' ? 'desc' : 'asc');
    $(this).removeClass().addClass('sort-' + sortDir);

});

table {
  border-collapse: collapse;
  width: 400px;
}

th, td {
    padding: 5px;
    border: 1px #DDD solid;
}

.sort-asc:after,
.sort-desc:after {
    content: '▲';
    font-size: 12px;
}
.sort-desc:after {
    content: '▼';
}

<table>
    <thead>
        <tr>
            <th data-sort="number" data-class="number" >No</th>
            <th data-sort="number" data-class="department" >Department</th>
            <th data-sort="number">Quantity</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td rowspan="2" class="sortNum">1</td>
            <td class="depart">20</td>
            <td>20</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">VTP</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="2" class="sortNum">2</td>
            <td class="depart">30</td>
            <td>25</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">VTP</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="2" class="sortNum">3</td>
            <td class="depart">40</td>
            <td>50</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">VTP</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="2" class="sortNum">4</td>
            <td class="depart">50</td>
            <td>15</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">VTP</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="2" class="sortNum">5</td>
            <td class="depart">60</td>
            <td>32</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">VTP</td>
        </tr>
    </tbody>


    
    
</table>

Answer 1

您不需要 :eq 选择器，因为您通过 css 类引用单元格。它确实在第一列中起作用，因为单元格索引为零。您在选择器 $(a).find('td.sortNum:eq(' + index + ')') 中实质上所说的是“给我带有 'sortNum 类的 td 列表” ' 并且列出了位置 index 处的元素。但是选择器的第一个条件 - td.sortNum - 将只返回一个元素。

要使第二列再次排序，您可以删除 :eq 部分

    if(dataTH == 'number')
    {
        //alert("hi this is a number");
        var aText = $(a).find('td.sortNum').text(),
            bText = $(b).find('td.sortNum').text();          
    }
    else if(dataTH == 'department')
    {
        //alert("hi this is a department");
        var aText = $(a).find('td.depart').text(),
            bText = $(b).find('td.depart').text();          
    }

另请参阅http://jsfiddle.net/doc_snyder/Lvvmow8g/1/