javascript - 过滤表数据并删除过滤列

Question

我目前正在使用:

function searchNotes() {
    const url = "http://localhost:2609/api/notes"
    $.ajax({
        url: url,
        type: 'GET',
        success: function (notesList) {
            console.log(notesList)
            // EXTRACT VALUE FOR HTML HEADER. 
            var col = [];
            for (var i = 0; i < notesList.length; i++) {
                for (var key in notesList[i]) {
                    if (col.indexOf(key) === -1 && (key === 'title' || key === 'content' || key == 'category' || key == 'categoryId')) {
                        col.push(key);
                    }
                }
            }

            // CREATE DYNAMIC TABLE.
            var table = document.createElement("table");

            // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

            var tr = table.insertRow(-1); // TABLE ROW.

            for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th"); // TABLE HEADER.
                th.innerHTML = col[i];
                tr.appendChild(th);
            }

            // ADD JSON DATA TO THE TABLE AS ROWS.
            for (var i = 0; i < notesList.length; i++) {

                tr = table.insertRow(-1);

                for (var j = 0; j < col.length; j++) {
                    var tabCell = tr.insertCell(-1);
                    tabCell.innerHTML = notesList[i][col[j]];
                }
            }

            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("listNotes");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
        }
    });
}

使用 jquery 创建 html 表。该表如下所示:

我想按顶部下拉列表中选择的categoryId 过滤表，然后我想删除categoryId 列。我有什么想法可以实现这一目标吗？

Answer 1

您需要使用.sort()在notesList对象上，像这样:

notesList.sort(function(a, b) {
    return a.categoryId - b.categoryId;
});

将其放在将值附加到 html 之前。

要“删除”categoryId 列非常简单:只需从 if 语句中删除以下位即可:

 || key == 'categoryId'

所以你的最终结果是这样的:

function searchNotes() {
    const url = "http://localhost:2609/api/notes"
    $.ajax({
        url: url,
        type: 'GET',
        success: function (notesList) {
            notesList.sort(function(a, b) {
                return a.categoryId - b.categoryId;
            });

            // EXTRACT VALUE FOR HTML HEADER. 
            var col = [];
            for (var i = 0; i < notesList.length; i++) {
                for (var key in notesList[i]) {
                    if (col.indexOf(key) === -1 && (key === 'title' || key === 'content' || key == 'category')) {
                        col.push(key);
                    }
                }
            }



            // CREATE DYNAMIC TABLE.
            var table = document.createElement("table");

            // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

            var tr = table.insertRow(-1); // TABLE ROW.

            for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th"); // TABLE HEADER.
                th.innerHTML = col[i];
                tr.appendChild(th);
            }

            // ADD JSON DATA TO THE TABLE AS ROWS.
            for (var i = 0; i < notesList.length; i++) {

                tr = table.insertRow(-1);

                for (var j = 0; j < col.length; j++) {
                    var tabCell = tr.insertCell(-1);
                    tabCell.innerHTML = notesList[i][col[j]];
                }
            }

            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("listNotes");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
        }
    });
}