如何将基于jQuery的表格数据提取代码改写为原生JavaScript实现？

当然可以用原生JS替代这段jQuery代码，而且逻辑完全一致，甚至还能修正原代码里的一个小问题（后面会提到）。下面是对应的原生实现：

const xs = [];
const ys = [];

// 遍历所有带有.my-table类的表格
document.querySelectorAll('.my-table').forEach(table => {
    const tableXCellsData = [];
    const tableYCellsData = [];

    // 遍历当前表格内的所有行（这里修正了原jQuery代码的全局查找问题）
    table.querySelectorAll('tr').forEach(row => {
        // 提取当前行的.xcell文本
        const xCell = row.querySelector('.xcell');
        if (xCell) {
            tableXCellsData.push(xCell.textContent.trim());
        }

        // 提取并处理当前行的.ycell值
        const yCell = row.querySelector('.ycell');
        if (yCell) {
            const cleanedText = yCell.textContent.trim().replace(',', '.');
            const yValue = parseFloat(cleanedText);
            // 避免转换失败时存入NaN，可根据需求调整
            tableYCellsData.push(isNaN(yValue) ? null : yValue);
        }
    });

    xs.push(tableXCellsData);
    ys.push(tableYCellsData);
});

console.log(xs);
return { xs, ys };

代码说明（对应原jQuery逻辑）： #

• 获取表格：用document.querySelectorAll('.my-table')替代$(".my-table")，这是原生DOM获取匹配元素的标准方法。
• 遍历元素：用原生forEach替代jQuery的.each()，回调参数直接就是当前处理的元素（表格/行），更直观。
• 查找子元素：用table.querySelectorAll('tr')和row.querySelector('.xcell')替代jQuery的find()，确保只在当前父元素内查找——原jQuery代码里的$(".my-table tr")会全局查找所有表格的行，这是一个潜在问题，原生代码修正了这一点。
• 文本与数值处理：用textContent获取元素文本（和jQuery的text()等效），然后用原生字符串和数值方法完成替换、转换，逻辑和原代码完全一致，还额外加了trim()清理空格、isNaN判断避免无效数值。

这样实现后，功能和你原来的jQuery代码完全一致，而且不需要依赖任何外部库，性能也会更优~

内容的提问来源于stack exchange，提问作者Vitaliy Povestev