首页 > 解决方案 > 排序表时如何触发跨度元素

问题描述

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

// 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

标签: javascriptjqueryhtmlsorting

解决方案


也许如果你调整你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();
    };
}

推荐阅读