如何用jQuery获取表格数据并弹窗展示，同时分配至独立变量

看起来你已经搞定了按钮点击的基础逻辑，现在只需要扩展代码来遍历表格单元格就行，我给你写一个完整的实现，还兼顾了后续变量使用的需求：

首先，直接看修改后的完整脚本：

(function() {
  'use strict';
  $("#btnMain").click(function(){
    // 用一个对象统一存储所有单元格数据，比零散变量更易维护
    const tableData = {};
    // 收集所有文本用于弹窗展示
    const displayText = [];

    // 遍历表格的每一行
    $("#resultsTable tr").each(function(rowNum) {
      // 遍历当前行的每个单元格
      $(this).find("td").each(function(cellNum) {
        const cellContent = $(this).text().trim();
        // 生成你要的变量名格式：tr1td1、tr1td2...
        const keyName = `tr${rowNum + 1}td${cellNum + 1}`;
        // 把数据存入对象
        tableData[keyName] = cellContent;
        // 把文本加入展示数组
        displayText.push(cellContent);
      });
    });

    // 弹窗展示拼接好的文本
    alert(displayText.join(" "));

    // --- 以下是后续使用变量的部分 ---
    // 方式1：直接通过对象访问（推荐，灵活）
    console.log(tableData.tr1td1); // 输出 "one"
    console.log(tableData.tr2td3); // 输出 "six"

    // 方式2：解构为单独变量（如果你一定要用tr1td1这种独立变量）
    const { tr1td1, tr1td2, tr1td3, tr2td1, tr2td2, tr2td3 } = tableData;
    console.log(tr1td2); // 输出 "two"
  });
})();

关键逻辑解释： #

• 遍历表格：用$("#resultsTable tr").each()遍历每一行，再嵌套$(this).find("td").each()遍历该行的每个单元格，这样就能捕获所有<td>的内容。
• 数据存储：用tableData对象来统一管理所有单元格数据，避免创建一堆零散变量，后续维护起来更省心。如果确实需要单独的变量，用ES6的解构赋值就能轻松提取。
• 弹窗文本：把每个单元格的文本存入数组，最后用join(" ")拼接成空格分隔的字符串，正好符合你要的弹窗效果。
• 清理空白：用.trim()去掉单元格文本前后的多余空白，避免弹窗里出现不必要的空格。

这样修改后，点击按钮就会弹出one two three four five six，同时所有单元格的数据都存在tableData对象里（或者解构后的单独变量），完全满足后续业务逻辑的使用需求。

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