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

您需要在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);
        }
    });
}

筛选表数据，并删除筛选的列

1 个答案: