Sort Table Client Side with Plain JavaScript and without any library

Question

I searched in the website a lot but I couldn't find my answer. They are either too complex or they require JQuery, an external library or I couldn't manage to make them work.

I am looking for a JavaScript to have the following condition.

1. Run on client Side from bookmark
2. Easy to understand
3. No Libraries
4. Sort an html table and high-light related titles

The project is for a Helpdesk software where multiple tickets are created because of replies/forward/conversations. It becomes like the following (i.e):

• first ticket title: Cannot login
• Second ticket title: Re: Cannot login
• Third ticket title: Fw: R: Cannot login

Finding those in the middle of like 30 or more tickets and merging them can sometime contain mistakes and annoyance especially if I am busy. So I wanted a way to sort and highlight them with a click without affecting any formatting.

The html table does note have a head, but have the first two rows for head and filtering function. So there should be a way to skip them.

Please suggest a code to do it.

Answer 1

Please note that I am a complete beginner with Java-scripting but was able to build this solution one part at a time.

The solution is to go through the table row by row and extracting the "textContent" from the required cell (column in the row). and making an array where the first level is the cleaned out cell then the second level is the row itself.

cleaning to detects same tickets titles by removing "Re:" and "Fw:" from the textContent

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

creating the array while deducting the startRow so it starts at 0.

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

It will become something like this arr[index] = [key,row]

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

then we can use the simple array sort function.

arr.sort();

after that we can delete the current table rows while keeping the first 2 rows.

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

then we can regenerate the table while checking for any duplicates and changing the background table to "yellow" to duplicates.

The complete code is as follows:

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

Use block commenting for commenting the code so it will work normally in the bookmark. (i.e. /* some comment */)