Question

我目前正试图找到一种方法，在您点击相关标题时对HTML表格列进行排序。让我们充满挑战的是，我所制作的桌子是用纯粹的JS制作的，而且我唯一能够设法使用的是＃34;＆＃34;当我使用onclick生成表头时，捕获点击事件是在循环期间。

以下是代码：

headerArray.forEach(function(heading) {
    let el = document.createElement('th');
    el.onclick = function(e) { 
        console.log(e.target);
    };
    el.appendChild(document.createTextNode(heading));
    header.appendChild(el);
});

如你所见，我现在所做的一切都是输出到控制台。我尝试过添加事件监听器，点击次数没有注册。我试图用纯JS做这件事。即使在动态创建表时，是否有一种有效的方法来实现这一目标？

我创建表的完整功能如下（仅供参考，数据从JSON对象加载）：

function makeTable(data) {

    let table = document.createElement('table');
    table.id = 'dataTable';

    let thead = document.createElement('thead');
    table.appendChild(thead);

    let tbody = document.createElement('tbody');
    table.appendChild(tbody);

    let header = document.createElement('tr');

    let headerArray = ['Date', 'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7'];
    let jsonKeys = ['date', 'item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7'];

    headerArray.forEach(function(heading) {
        let el = document.createElement('th');
        el.onclick = function(e) { 
            console.log(e.target);
        };
        el.appendChild(document.createTextNode(heading));
        header.appendChild(el);
    });

    thead.appendChild(header);

    for (let i = 0; i < Object.keys(data).length; i++) {

        let tr = document.createElement('tr');
        for (let j = 0; j < jsonKeys.length; j++) {
            let el = document.createElement('td');
            el.appendChild(document.createTextNode((j == 0) ? formatDate(Object.keys(data)[i].split('-')) : data[Object.keys(data)[i]][jsonKeys[j]]));
            tr.appendChild(el);
        }

        tbody.appendChild(tr);

    }

    document.body.appendChild(table);
}

对我来说，最好的方法是什么？

单击标题对表格列进行排序？

0 个答案: