Question

我需要在jquery中实现一个功能，其中用户单击第一行，并对单击的行中的其余项进行排序。我在这里https://codepen.io/shaikh709/pen/orNLaY?editors=0010

准备了一个codepen

这是我要对表格进行排序的

function sortRow(rowIndex) {

    let table               = $('.report')
    let tr                  = table.find('tr');
    let selectedRow         = $(tr[rowIndex]);
    let selectedRowTd       = selectedRow.find('td');
    let selectedRowSorting  = [];

    // find and get clicked tr and it formats it in index and value of the cells
    selectedRowTd.each(function(tdIndex){
        let td = $(selectedRowTd[tdIndex]);
        selectedRowSorting.push({
            tdIndex: tdIndex,
            value: parseInt(Math.ceil(td.text().trim()))
        })
    })


    // it will compare values and sort
    selectedRowSorting = selectedRowSorting.sort(function(a, b){

        if (a.value == 0) {
            return -1;
        }

        if (b.value == 0) {
            return -1;
        }

        return b.value - a.value
    });

    console.log(selectedRowSorting)

    // it will only return indexs of sorted list of cells
    var sortedIndexs = selectedRowSorting.map(function(rowSorting){
        return rowSorting.tdIndex
    })

    console.log(sortedIndexs)

    table.find('tr').each(function(){
        let tr = $(this);
        let modifiedTr = [];

        tr.children().each(function(tdIndex, td){

          if (tdIndex == 0) {
            console.log(td)           
            modifiedTr[0] = td;

          } else {
            for (let i =0; i < sortedIndexs.length;i++) {
              console.log(sortedIndexs[i])
              // it gives me index of sorted column.
              if (tdIndex == i) {
                let sortedIndex = sortedIndexs[i];

                if ( sortedIndex == undefined) {
                  console.log('i', i, sortedIndex)
                  sortedIndex = sortedIndexs.length+1
                }

                modifiedTr[sortedIndex] = td;
              }
            }
          }

        })

        tr.append(modifiedTr)
    })
}

我在https://codepen.io/shaikh709/pen/orNLaY?editors=0010

处创建了一个演示

当用户单击连续的第一个（非常左侧）单元格时。我希望该行的其余部分切换为最大值或最小值。

被困在这里约两天。任何帮助表示赞赏。谢谢。：）

Answer 1

我会保持简单，只构建一个小的值数组，然后在数组上使用.sort()。

工作示例：https://jsfiddle.net/Twisty/ondf3ram/

JavaScript

$(function() {
  function sortDesc(a, b) {
    return a - b;
  }

  function sortAsc(a, b) {
    return b - a;
  }

  function sortRow(rObj, desc) {
    var curArr = [];
    $("td", rObj).each(function(i, el) {
      curArr.push(parseInt($(el).text().trim()));
    });
    if (desc == undefined || desc == true) {
      curArr.sort(sortDesc);
    } else {
      curArr.sort(sortAsc);
    }
    $("td", rObj).each(function(i, el) {
      $(el).html(curArr[i]);
    });
  }

  $(".sortable tbody th").on("click", function(e) {
    var r = $(this).parent();
    if ($(this).data("sort") == undefined) {
      $(this).data("sort", true);
    }
    sortRow(r, $(this).data("sort"));
    $(this).data("sort", $(this).data("sort") ? false : true);
  });
});

使用适当的选择器会对您有很大帮助！我不确定您是否要将降序转换为升序。所以这是我追求的目标：

点击<th>中的<tbody>（第一个）单元格，以执行父级<tr>的某种类型
最初使用降序排序
其他点击将在Desc中切换排序。到Asc。

为此，我们具有sortRow()函数，该函数需要jQuery <tr> Object 。（可选）它可以接受排序方向作为布尔值（默认值：true，true = Desc。/ false = Asc）。它执行排序，不返回任何内容。

我创建了一个数组，并使用.each()函数对其进行填充，以遍历目标<td>中的每个<tr>。由于获取了单元格的.text()或Text节点，因此我使用.trim()删除所有空白，然后使用parseInt()用整数填充数组。

然后我们根据比较函数对数组进行排序：

定义替代排序顺序的函数。该函数应返回一个负值，零值或正值，具体取决于参数。

然后，我们再次重复相同的单元格并替换数组中的内容。全部完成！

我通过在每一行上寻找.data()添加了切换功能。如果这是第一次点击，将没有数据，因此我们假定为Desc。分类。下次我们单击该行标题时，它将具有一个值并切换到Asc。排序。

更新

请不要发表您的评论，听起来您想对Martix进行分类。在这里讨论：How to sort 2 dimensional array by column value?

工作示例：https://jsfiddle.net/Twisty/ondf3ram/70/

JavaScript

$(function() {

  var selInd;

  function sortMatrixDesc(a, b) {
    if (a[selInd] === b[selInd]) {
      return 0;
    } else {
      return (a[selInd] < b[selInd]) ? -1 : 1;
    }
  }

  function sortMatrixAsc(a, b) {
    if (a[selInd] === b[selInd]) {
      return 0;
    } else {
      return (a[selInd] > b[selInd]) ? -1 : 1;
    }
  }

  function getTblCont(tb) {
    var cols = [];
    $("tr:first td", tb).each(function(i, el) {
      cols[i] = [];
    });
    for (var c = 0; c < cols.length; c++) {
      $("tr", tb).each(function(i, el) {
        cols[c].push(parseInt($("td", el).eq(c).text().trim()));
      });
    }
    return cols;
  }

  function sortRow(rObj, desc) {
    var tblObj = getTblCont(rObj.parent());
    var rowInd = rObj.index();
    if (desc == undefined || desc == true) {
      tblObj.sort(sortMatrixDesc);
    } else {
      tblObj.sort(sortMatrixAsc);
    }
    rObj.parent().find("tr").each(function(r, tr) {
      $("td", tr).each(function(i, el) {
        $(el).html(tblObj[i][r]);
      });
    });
  }

  $(".sortable tbody th").on("click", function(e) {
    var r = $(this).parent();
    selInd = r.index();
    if ($(this).data("sort") == undefined) {
      $(this).data("sort", true);
    }
    sortRow(r, $(this).data("sort"));
    $(this).data("sort", $(this).data("sort") ? false : true);
  });
});

希望有帮助。

如何为html表建立行排序（水平排序）？

1 个答案: