[英]Sort Table Client Side with Plain JavaScript and without any library
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.
它们要么太复杂,要么需要JQuery,一个外部库,否则我无法使其正常工作。
I am looking for a JavaScript to have the following condition. 我正在寻找具有以下条件的JavaScript。
The project is for a Helpdesk software where multiple tickets are created because of replies/forward/conversations. 该项目适用于帮助台软件,其中由于答复/转发/对话而创建了多个票证。 It becomes like the following (ie):
它变成如下(即):
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. 在30张左右或更多的票中找到这些票并将其合并可能会在某些时候包含错误和烦恼,尤其是在我很忙的时候。 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. html表确实记录了一个头,但是头和过滤功能具有前两行。 So there should be a way to skip them.
因此,应该有一种跳过它们的方法。
Please suggest a code to do it. 请建议执行此操作的代码。
Please note that I am a complete beginner with Java-scripting but was able to build this solution one part at a time. 请注意,我是Java脚本编写的完整入门者,但一次可以构建此解决方案。
The solution is to go through the table row by row and extracting the "textContent" from the required cell (column in the row). 解决方案是逐行浏览表,然后从所需单元格(行中的列)中提取“ textContent”。 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 清理,通过从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();
creating the array while deducting the startRow so it starts at 0. 在扣除startRow的同时创建数组,使其从0开始。
arr[i - startRow] = [key, rows[i]];
It will become something like this arr[index] = [key,row] 它将变成这样的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. 之后,我们可以删除当前表的行,同时保留前2行。
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. 使用块注释来注释代码,以便它可以在书签中正常工作。 (ie /* some comment */)
(即/ *一些评论* /)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.