排序表格时如何在span元素上触发

时间:2019-05-09 12:23:19

标签: javascript jquery html sorting

为了根据文件的大小对表进行排序,我使用以下代码:

// table sort
    $(document).on('click','th',function() {    
        var table = $(this).parents('table').eq(0)
        var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
        this.asc = !this.asc
        if (!this.asc){rows = rows.reverse()}
        for (var i = 0; i < rows.length; i++){table.append(rows[i])}
    })
    function comparer(index) {
        return function(a, b) {
            var valA = getCellValue(a, index), valB = getCellValue(b, index)
            return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
        }
    }
    function getCellValue(row, index){ return $(row).children('td').eq(index).text() }

带有td的行如下所示:

<!-- SIZE-->    
<td class="td-size table-data">
    <!-- raw size for sorting only-->
   <span class="sort-only hide">
          <?php echo filesize($dir . '/' . $file); ?>
      </span>
   <?php                           
     echo sizeFormat(recursive_directory_size($dir . '/' . $file);
   ?>
</td>

span元素之间的值是原始值(我想将其用于排序)。

如何在JavaScript中的span内的tr元素上触发? 因为现在它仅对td中的值进行排序。并且只能是span

中的td

1 个答案:

答案 0 :(得分:2)

也许如果您调整getCellValue以检查该span会起作用:

function getCellValue(row, index) { 
    let $td = $(row).children('td').eq(index),
        $span = $td.find('span.sort-only');

    if ($span.length) { // If span.sort-only was found
        return $span.text();
    } 
    else { // If not
        return $td.text();
    };
}