如何用JavaScript通过按钮获取邮件参数数据并保存至skim table

核心实现步骤 #

1. 页面基础结构 #

先搭建触发按钮、邮件参数存储容器（示例用隐藏字段模拟）和Skim Table的HTML结构：

<!-- 触发按钮 -->
<button id="saveEmailBtn">保存邮件参数到Skim Table</button>

<!-- 模拟邮件参数存储（实际场景可替换为API/邮件客户端数据） -->
<input type="hidden" id="emailSubject" value="项目进度同步">
<input type="hidden" id="emailSender" value="team@company.com">
<input type="hidden" id="emailReceiver" value="client@example.com">
<input type="hidden" id="sendTime" value="2024-05-20 15:40:00">

<!-- Skim Table 展示容器 -->
<table id="skimTable" border="1" cellpadding="8">
  <thead>
    <tr>
      <th>邮件主题</th>
      <th>发件人</th>
      <th>收件人</th>
      <th>发送时间</th>
    </tr>
  </thead>
  <tbody id="skimTableBody">
    <!-- 数据将插入此处 -->
  </tbody>
</table>

2. JavaScript核心逻辑 #

完成「点击获取参数→验证→写入Skim Table」的完整流程：

// 获取DOM元素
const saveBtn = document.getElementById('saveEmailBtn');
const tableBody = document.getElementById('skimTableBody');

// 绑定点击事件
saveBtn.addEventListener('click', function() {
  // 1. 获取邮件参数
  const emailData = {
    subject: document.getElementById('emailSubject').value.trim(),
    sender: document.getElementById('emailSender').value.trim(),
    receiver: document.getElementById('emailReceiver').value.trim(),
    sendTime: document.getElementById('sendTime').value.trim()
  };

  // 2. 验证必填参数
  if (!emailData.subject || !emailData.sender) {
    alert('缺少关键邮件参数，请检查');
    return;
  }

  // 3. 生成表格行并插入Skim Table
  const newRow = document.createElement('tr');
  newRow.innerHTML = `
    <td>${emailData.subject}</td>
    <td>${emailData.sender}</td>
    <td>${emailData.receiver}</td>
    <td>${emailData.sendTime}</td>
  `;
  tableBody.appendChild(newRow);

  // 可选：持久化到后端数据库的Skim Table
  // fetch('/api/skim-table/save', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify(emailData)
  // })
  // .then(res => res.json())
  // .then(data => {
  //   if (data.success) alert('数据已持久化到后端Skim Table');
  // })
  // .catch(err => console.error('保存失败:', err));

  alert('邮件参数已成功添加到Skim Table');
});

关键说明 #

• 数据来源适配：如果是浏览器扩展获取邮件客户端数据，可替换参数获取逻辑为对应API（如Chrome邮件扩展的chrome.messages接口）；如果是后端渲染页面，直接读取页面渲染的参数即可。
• 前端表格操作：若参数来自不可信源，建议使用textContent替代innerHTML插入内容，避免XSS风险。
• 后端持久化：若需要将数据存入数据库中的Skim Table，取消注释fetch部分代码，后端对应接口需接收JSON参数并写入目标表。

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