javascript - 使用纯 JavaScript 排序表客户端，无需任何库

Question

我在网站上搜索了很多，但找不到答案。它们要么太复杂，要么需要 JQuery、外部库，或者我无法使它们工作。

我正在寻找具有以下条件的 JavaScript。

1. 从书签在客户端运行
2. 易于理解
3. 没有图书馆
4. 对 html 表格进行排序并突出显示相关标题

该项目适用于帮助台软件，其中由于回复/转发/对话而创建了多个票证。它变得像下面这样(即):

• 第一个工单标题:无法登录
• 第二个工单标题:回复:无法登录
• 第三个工单标题:转发:R:无法登录

在 30 张或更多门票中找到这些门票并将它们合并有时可能会出现错误和烦恼，尤其是在我很忙的情况下。因此，我想要一种通过单击对它们进行排序和突出显示的方法，而不影响任何格式。

html表格确实有一个head，但是有前两行用于head和过滤功能。所以应该有办法跳过它们。

请建议一个代码来执行此操作。

Answer 1

请注意，我是 Java 脚本的初学者，但能够一次构建此解决方案的一部分。

解决方案是逐行浏览表格并从所需的单元格(行中的列)中提取“textContent”。并创建一个数组，其中第一级是清理后的单元格，第二级是行本身。

清理以通过从文本内容中删除“Re:”和“Fw:”来检测相同的票证标题

var key = rows[i].cells[col].textContent.replace(/[^a-zA-Z0-9: ]/g, '').trim();
key = key.replace(/Fw:/gi, '').replace(/Re:/gi, '').trim();

创建数组的同时减去 startRow，使其从 0 开始。

arr[i - startRow] = [key, rows[i]];

它会变成这样的 arr[index] = [key,row]

arr[0] = ['Cannot login','<td>....</td>']
arr[1] = ['next subject','<td>....</td>']

然后我们就可以使用简单的数组排序功能了。

arr.sort();

之后我们可以删除当前表格行，同时保留前两行。

    while (tbody.rows.length > startRow) {
        tbody.deleteRow(startRow);
    };

然后我们可以重新生成表，同时检查是否有重复项并将背景表更改为“黄色”以表示重复项。

完整代码如下:

javascript :
sortandclean();
function sortandclean() {
    var col = 6; /* title row */
    var startRow = 2; /* to skip the first two rows */
    var arr = []; /* main array which will contains the rows */
    var tbody = document.getElementById('RequestsView_TABLE').tBodies[0];
    var rows = tbody.rows;
    for (i = startRow; i < rows.length; i++) {
        var key = rows[i].cells[col].textContent.replace(/[^a-zA-Z0-9: ]/g, '').trim();
        key = key .replace(/Fw:/gi, '').replace(/Re:/gi, '').trim();
        arr[i - startRow] = [key, rows[i]];
    };
    console.log('rows: ' + rows.length);
    arr.sort(); /* sorting the easy way. works with both texts and numbers */
    while (tbody.rows.length > startRow) {
        tbody.deleteRow(startRow);
    };
    for (i = 0; i < arr.length; i++) {
        rowToInsert = arr[i][1]; /* arr[i][0] has the key and arr[i][1] has the row */
        if (arr[i][0] == lastrow) {
            rowToInsert.cells[col].style.backgroundColor = "yellow";
            tbody.rows[tbody.rows.length - 1].cells[col].style.backgroundColor = "yellow";
        }; /* if the current row have the same clean title highlight both current and previous rows title cell */
        tbody.appendChild(rowToInsert);
        var lastrow = arr[i][0];
        totalRows = i;
    };
    console.log('rows reinserted: ' + (totalRows + 1));
} void(0);

使用 block 注释来注释代码，以便它在书签中正常工作。 (即/* 一些评论 */)