如何将JavaScript console.log输出存入变量并在HTML中访问该变量？

嘿，既然你已经能在控制台成功打印选中行的名字和姓氏了，那把这些数据展示到页面上其实只是差一步操作DOM元素的事儿！我给你具体说说怎么改：

第一步：在HTML里添加一个展示选中数据的容器 #

首先，你需要在页面上找个地方放选中的用户信息，比如在表格下方加一个专门的区域：

<!-- 你的原有表格代码 -->
<table>
  <thead>
    <tr>
      <th>名字</th>
      <th>姓氏</th>
      <th>其他信息</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>...</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

<!-- 新增的展示容器 -->
<div style="margin-top: 20px; padding: 12px; border: 1px solid #eee; border-radius: 4px;">
  <strong>选中的用户：</strong>
  <span id="selected-user"></span>
</div>

第二步：修改JS代码，把数据输出到页面元素 #

既然你已经能在点击行时拿到数据并打印到控制台，那只需要把console.log的逻辑替换成更新上面那个容器的内容就行。假设你的原有JS点击事件是这样的：

// 给所有表格行绑定点击事件
document.querySelectorAll('table tbody tr').forEach(row => {
  row.addEventListener('click', function() {
    // 这里是你原来获取名字和姓氏的逻辑（根据你的实际代码调整）
    const firstName = this.cells[0].textContent.trim();
    const lastName = this.cells[1].textContent.trim();
    
    // 原来的控制台打印
    // console.log(firstName, lastName);
    
    // 现在改成更新页面上的展示元素
    const displayElement = document.getElementById('selected-user');
    // 用textContent展示纯文本（更安全，避免XSS风险）
    displayElement.textContent = `${firstName} ${lastName}`;
    
    // 如果需要支持多选（比如点击多行累加展示），可以换成innerHTML：
    // displayElement.innerHTML += `<p>${firstName} ${lastName}</p>`;
  });
});

关键说明 #

• 核心逻辑就是：拿到数据后，通过getElementById获取页面上的展示容器，然后用textContent（推荐，纯文本无风险）或innerHTML（支持HTML格式）把数据塞进去。
• 如果你的数据是从行的data-*属性里获取的（比如<tr data-first="John" data-last="Doe">），那只需要把获取数据的代码改成const firstName = this.dataset.first就行，其他逻辑不变。

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