通过使用javascript单击列的标题对列进行升序和降序排序答案

【问题标题】：Sorting a column ascending and descending by clicking on the column's header using javascript通过使用javascript单击列的标题对列进行升序和降序排序
【发布时间】：2014-12-08 17:34:57
【问题描述】：

我需要帮助来创建一个 javascript 函数，该函数允许我通过单击列标题对列（表）进行排序。该列包含 8 位数字和几行。我需要通过验证对其进行升序然后降序排序，以确保排序确实有效并记录每个排序。

我正在使用带有 javascript 脚本的 TestComplete。

验证示例：

//验证排序功能

       for (var k = 0; i < records.length; k++)
        {
        if(column[k] != column_sorted[k])
        Log.Warning("Sort functionality does not work for the column")
   
        break;
       }
       Log.Checkpoint("Sort functionality works for the column")
         Log.Message(column_sorted[k].contentText);

感谢您的帮助！

【问题讨论】：

这是作业还是什么？有很多框架和现成的服务器控件可以为您解决这个问题。
或者，如果您正在使用 .Net GridView 服务器控件。
@Seano666 你为什么提到.NET？问题或标签中未指定。
您是否尝试在 TestComplete 中记录您的操作？
致其他人：这个问题与浏览器中的 JavaScript 无关。它是关于使用 TestComplete 的自动化 Web 测试（GUI 自动化）。

标签： javascript sorting testcomplete

【解决方案1】：

简单的表格分类器并不难。诀窍在于获得正确的排序功能，其余的相当简单。下面展示了如何对带有一列数字的表格进行排序，您可以添加多少功能。

一些测试 HTML：

<table id="t0">
  <tr><td>44444444
  <tr><td>66666666
  <tr><td>33333333
  <tr><td>77777777
  <tr><td>11111111
  <tr><td>55555555
  <tr><td>22222222
</table>

<button onclick="sortRows(document.getElementById('t0'));">Sort</button>
<button onclick="sortRows(document.getElementById('t0'), true);">Sort reverse</button>

和脚本

// Sort table rows by the first cell (index 0)
// Setting reverse to true sorts in reverse
function sortRows(table, reverse) {

  // Get the rows, this gets all rows in a table but can be
  // restricted to those within a table section
  var row, rows = table.rows;
  var cells = [];
  reverse = !!reverse;

  // Get cells to sort and load into array
  // Gets the first cell in each row, but could use the cell index
  // of a header cell that was clicked on
  for (var i=0, iLen=rows.length; i<iLen; i++) {
    cells.push(rows[i].cells[0]);
  }

  // Sort the cells as numbers
  // or any other sort algorithm (e.g. date, alphabetic, etc.)
  cells.sort(function(a, b) {
    return getText(a) - getText(b);
  });

  // Reverse if required
  if (reverse) cells.reverse();

  // Order rows based on new order of cells
  // This works within a table section, making it easy to exclude
  // header and footer rows
  for (var j=0, jLen=cells.length; j<jLen; j++) {
    row = cells[j].parentNode;
    row.parentNode.appendChild(row);
  }
}

// A simple helper as textContent is not supported by all browsers in use
// Can be much more sophisticated and trim whitespace
function getText(el) {
  return el.textContent || el.innerText || '';
}

【讨论】：

【解决方案2】：

这是一项艰巨的任务。您可能需要为此使用库，例如 TableSorter：http://tablesorter.com/docs/#Demo

【讨论】：

【解决方案3】：

如果您已经将列的值放入一个数组中，您可以简单地使用 JScript sort 方法对该数组进行升序排序。如果需要进行降序排序，则需要使用简单的自定义排序函数。

function test()
{
  var records = new Array();
  records.push(92749283);
  records.push(47932729);
  records.push(12309334);
  records.push(84932889);

  Log.Message("Ascending");
  records.sort();
  for (var i = 0; i < records.length; i++)
    Log.Message(records[i]);

  Log.Message("Descending");
  records.sort(sortDesc);
  for (var i = 0; i < records.length; i++)
    Log.Message(records[i]);
}

function sortDesc(a, b)
{
  if (a > b) return -1;
  if (a < b) return 1;
  return 0;
}

【讨论】：