如何从 csv 文件中的 JS 生成的表中选择列，以仅使用选定的列进行进一步分析？答案

【问题标题】：How can I select columns from a table generated in JS from a csv file, to do a further analysis with only the selected columns?如何从 csv 文件中的 JS 生成的表中选择列，以仅使用选定的列进行进一步分析？
【发布时间】：2022-10-10 17:49:02
【问题描述】：

对于这个项目，我使用 python 和 JS。我使用的框架是cherrypy，而对于html，我使用的是yattag。（顺便说一句，我是初学者）我已经从一个 csv 文件生成了一个表，其中包含我找到的以下 JS 代码示例：

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

我的项目的下一步是从生成的表中选择列（使用复选框或任何其他方式），然后将这些列的数据用于项目的进一步步骤。关于如何做到这一点的任何想法？

【问题讨论】：

标签： javascript python cherrypy

【解决方案1】：

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

const isSelectedByNum = {};

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

    reader.addEventListener('loadend', () => {
        //render the table
        let html = '';
        const lines = reader.result.split('
').slice(0, 20);
        const colNumbers = lines[0].split(',').map((_, i) => i);
        for (let colNum of colNumbers) {
            html += '<th>';
            html +=     'col' + colNum;
            html += '</th>';
        }
        for (let line of lines) {
            html += '<tr>';
            for (let item of line.split(',')) {
                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');
        for (let colNum = 0; colNum < columnHeaders.length; colNum++) {
            const columnHeader = columnHeaders[colNum];
            columnHeader.addEventListener('click', () => {
                isSelectedByNum[colNum] = !isSelectedByNum[colNum];
                if (isSelectedByNum[colNum]) {
                    columnHeader.classList.add('selected');
                } else {
                    columnHeader.classList.remove('selected');
                }
                output.innerHTML = JSON.stringify(isSelectedByNum);
            });
        }
    });
  
    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;
}

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

【讨论】：