过滤表数据，并删除过滤列答案

【问题标题】：Filter Table Data, and Remove Filtered Column过滤表数据，并删除过滤列
【发布时间】：2019-02-03 22:14:22
【问题描述】：

我目前正在使用：

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 列。有什么想法可以实现吗？

【问题讨论】：

请添加您的 html 结构并发布您已经编写的 javascript 以实现删除。只是为了确保：您真的要删除列而不是过滤的行？
我想删除列，而不是过滤后的行。我目前还没有做到这一点，这就是我来寻求帮助的原因；）

标签： javascript jquery html json ajax

【解决方案1】：

您需要在 notesList 对象上使用.sort()，如下所示：

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

【讨论】：