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

我需要在jquery中实现一个功能，其中用户单击第一行并对单击行中的剩余项进行排序。 我在这里准备了一支密码笔

这是我为排序表准备的js

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)
    })
}

函数sortRow（行索引）{
let table=$（“.report”）
设tr=table.find（'tr'）；
设selectedRow=$（tr[rowIndex]）；
让selectedRowTd=selectedRow.find（'td'）；
设selectedRowSorting=[]；
//查找并单击tr，然后将其格式化为单元格的索引和值
已选择的箭头。每个（功能（tdIndex）{
设td=$（selectedRowTd[tdIndex]）；
selectedRowSorting.push({
tdIndex:tdIndex，
值：parseInt（Math.ceil（td.text（）.trim（））
})
})
//它将比较值并进行排序
selectedRowSorting=selectedRowSorting.sort（函数（a，b）{
如果（a.value==0）{
返回-1；
}
如果（b.value==0）{
返回-1；
}
返回b.value-a.value
});
console.log（selectedRowSorting）
//它只返回已排序单元格列表的索引
var sortedIndex=selectedRowSorting.map（函数（行排序）{
返回rowSorting.tdIndex
})
控制台日志（分类索引）
table.find（'tr'）。每个（函数（）{
设tr=$（这个）；
设modifiedTr=[]；
tr.children（）.每个函数（tdIndex，td）{
如果（tdIndex==0）{
console.log（td）
modifiedTr[0]=td；
}否则{
for（设i=0；i

我在这里创建了一个演示

当用户单击行中的第一个（最左边）单元格时。我希望行的其余部分切换到最大值到最小值

被困在这里大约两天了。感谢您的帮助。谢谢

---

：）

我会保持简单，只需构建一个值的小数组，然后在数组上使用

.sort（）

工作示例：

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);
  });
});

$(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);
  });
});

使用合适的选择器将对您大有帮助！我不确定您是否要将降序排序反转为升序排序。以下是我追求的目标：

• 单击
  中的
  单元格（第一个）以执行父级

• 最初使用降序排序
• 额外的点击会将排序从描述切换到Asc

为此，我们使用了

sortRow（）

函数，该函数需要一个jQuery

对象。可选地，它可以接受排序方向作为布尔值（默认值：

true

，

true

=Desc./

false

=Asc）。它执行排序，不返回任何内容

我创建了一个数组，并使用

.each（）

函数填充它，以迭代目标

中的每个

。因为我得到的是单元格的

.text（）

或text节点，所以我使用

.trim（）

删除任何空格，然后使用

parseInt（）

用整数填充数组

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

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

然后，我们重新迭代相同的单元格并替换数组中的内容。全部完成

我通过在每行上查找

.data（）

添加了切换功能。如果这是第一次单击，则将没有数据，因此我们假定为描述排序。下次单击该行标题时，它将有一个值并切换到Asc。排序

更新

根据您的评论，听起来您想对Martix进行排序。这里讨论了这一点：

工作示例：

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);
  });
});

$(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);
  });
});

$（函数（）{
var selInd；
函数sortMatrixDesc（a，b）{
如果（a[selInd]==b[selInd]）{
返回0；
}否则{
返回（a[selInd]b[selInd]）？-1:1；
}
}
函数getTblCont（tb）{
var cols=[]；
$（“tr:first td”，tb）。每个（功能（i，el）{
cols[i]=[]；
});
对于（var c=0；c

---

希望能有帮助。

太棒了。非常感谢。我之所以这样构建它，是因为列必须跟随更改。就像在您的示例中一样，只单击了行更改，但列标题保持不变，这使得更改无效