如何将 HTML 表格转换为带命名键的 JavaScript 对象数组-php教程-PHP中文网

如何将 HTML 表格转换为带命名键的 JavaScript 对象数组

本文讲解如何将 HTML 表格中每行的值，按预设字段名（如 first_name、last_name、email）映射为键值对对象，并组成结构清晰的数组，替代默认的纯数字索引二维数组。

本文讲解如何将 html 表格中每行的 `` 值，按预设字段名（如 `first_name`、`last_name`、`email`）映射为键值对对象，并组成结构清晰的数组，替代默认的纯数字索引二维数组。

要实现从「数字索引数组」到「具名键对象数组」的转换，核心在于：不再使用 [] 创建纯数组，而是用 {} 构建键值对对象，并显式指定每个字段的语义化键名。

原代码中 rowDataArray = [] 导致结果为 [0 => "Test", 1 => "Test", ...]，而目标格式要求的是 [0 => ["first_name" => "Test", "last_name" => "Test", ...]] —— 即每行对应一个对象（Object），而非数组（Array）。

以下是优化后的完整 JavaScript 实现：

let convertedIntoArray = [];
const fieldKeys = ['first_name', 'last_name', 'email']; // 与表头顺序严格对应

$('#campaign_csv_table tbody tr').each(function () {
    const rowData = {}; // 使用对象而非数组
    const $textareas = $(this).find('textarea');

    if ($textareas.length > 0) {
        $textareas.each(function (index) {
            const key = fieldKeys[index];
            if (key !== undefined) {
                rowData[key] = $(this).val().trim() || ''; // 推荐用 .val() 获取输入值，.text() 仅适用于初始文本内容
            }
        });
        convertedIntoArray.push(rowData);
    }
});

console.log(convertedIntoArray);
// 输出示例：
// [
//   {
//     "first_name": "Alice",
//     "last_name": "Smith",
//     "email": "alice@example.com"
//   }
// ]

✅ 关键改进说明：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

使用 const rowData = {} 初始化空对象，而非 []；
定义 fieldKeys 数组，明确字段语义与列顺序的映射关系（需与 <thead> 中 <code><th> 的顺序一致）； <li>使用 <code>.val() 替代 .text() 读取 <textarea></textarea> 当前值（.text() 在动态编辑后可能失效，.val() 才是标准获取表单控件值的方法）；
添加 trim() 和空值兜底（|| ''），提升数据健壮性；
选择器优化为 #campaign_csv_table tbody tr，避免误匹配 <thead> 行（原 HTML 中 <code><tr> 缺少闭合标签且结构不规范，建议补全）。<p>⚠️ <strong>注意事项：</strong> </p> <ul> <li>确保 HTML 表格中每行 <code><textarea></textarea> 的数量与 fieldKeys 长度一致，否则会出现 undefined 键或丢失字段；
若需支持动态表头（如从 <th> 自动提取字段名），可扩展逻辑：先遍历 <code>thead th 提取文本并转为小写下划线格式（如 "First Name" → "first_name"），再用于键名生成；
后端接收时，该结构可直接 JSON.stringify 传输，PHP 端用 json_decode($input, true) 即得关联数组，无需 array_values() 调整。