如何从csv文件中从JS中生成的表中选择列，以便只对所选列进行进一步分析？

Question

对于这个项目，我使用python和JS。我使用的框架是cherrypy，而html使用的是yattag。(顺便说一句，我是个初学者)我用下面的JS代码示例从csv文件中生成了一个表：

let picker = document.getElementById("demoPick"), 
table = document.getElementById("demoTable"); 

picker.onchange = () => { 
    table.innerHTML = "";


    let reader = new FileReader(); 
    
    reader.addEventListener("loadend", ()=> {
    
        let csv = reader.result.split("\r\n").slice(0,20);
        for (let row of csv) { 
            let tr = table.insertRow(); 
            for (let col of row.split(",")){ 
                let td = tr.insertCell(); 
                td.innerHTML = col; 
            }
        }
    });
    reader.readAsText(picker.files[0]);

我的项目的下一步是从生成的表中选择列(带有复选框或任何其他方式)，然后使用这些列的数据进行项目的进一步步骤。对怎么做有什么想法吗？

Answer 1

​

const picker = document.querySelector('#demoPick');
const table = document.querySelector('#demoTable');
const output1 = document.querySelector('#output1');
const output2 = document.querySelector('#output2');

const isColSelectedByNum = {};
const itemsByColNum = [];

picker.onchange = () => {
    const reader = new FileReader();

    reader.addEventListener('loadend', () => {
        const lines = reader.result.split('\n').slice(0, 20);
        const colNumbers = lines[0].split(',').map((_, i) => i);

        //fill itemsByColNum
        const itemByColByRow = lines.map(line => line.split(','));
        for (let colNum of colNumbers) {
            for (let rowNum = 0; rowNum < lines.length; rowNum++) {
                const item = itemByColByRow[rowNum][colNum];
                itemsByColNum[colNum] = itemsByColNum[colNum] || [];
                itemsByColNum[colNum].push(item);
            }
        }

        //render the table
        let html = '';
        for (let colNum of colNumbers) {
            html += '<th>';
            html += 'col' + colNum;
            html += '</th>';
        }
        for (let line of lines) {
            const rowItems = line.split(',');
            html += '<tr>';
            for (let colNum = 0; colNum < rowItems.length; colNum++) {
                const item = rowItems[colNum];
                html += `<td>`;
                html += item;
                html += '</td>';
            }
            html += '</tr>';
        }
        table.innerHTML = html;

        //handle clicking on table column headers by toggling selected
        const columnHeaders = document.querySelectorAll('th');
        const allTrs = document.querySelectorAll('#demoTable tr');
        for (let colNum = 0; colNum < columnHeaders.length; colNum++) {
            const columnHeader = columnHeaders[colNum];
            columnHeader.addEventListener('click', () => {
                isColSelectedByNum[colNum] = !isColSelectedByNum[colNum];

                //toggle highlight on header
                if (isColSelectedByNum[colNum]) {
                    columnHeader.classList.add('selected');
                } else {
                    columnHeader.classList.remove('selected');
                }

                //toggle highlight on column items
                for (let colNum of colNumbers) {
                    const isColSelected = isColSelectedByNum[colNum];
                    for (let tr of allTrs) {
                        const td = tr.children[colNum];
                        if (isColSelected) {
                            td.classList.add('selected');
                        } else {
                            td.classList.remove('selected');
                        }
                    }
                }

                //display isColSelectedByNum
                output1.innerHTML = JSON.stringify(isColSelectedByNum);

                //display itemsByColNum[colNum] for selected colNums
                let html = '';
                for (let colNum of colNumbers) {
                    const isColSelected = isColSelectedByNum[colNum];
                    if (isColSelected) {
                        const colStr = JSON.stringify(itemsByColNum[colNum]);
                        html += `${colNum}: ${colStr}<br/>`;
                    }
                }
                output2.innerHTML = html;
            });
        }
    });

    reader.readAsText(picker.files[0]);
};

table {
  border: 1px solid red;
}

tr {
  border: 1px solid green;
}

td {
  border: 1px solid blue;
}

th:hover {
  color: red;
}

th.selected {
  background-color: yellow;
}

td.selected {
  background-color: yellow;
}

Choose a csv file where all lines have the same number of items.<br/>
<input type="file" id="demoPick"></input><br/>
<table id="demoTable"></table>
isSelectedByNum: <span id="output1">{}</span><br/>
selected columns:<br/>
<span id="output2"></span>

​