Semantic UI弹窗无法正常显示Div内容，需展示表格行数据求解决方案

我帮你排查了代码里的几个核心问题，现在给你完整的修复方案：

问题根源 #

1. 脚本引入顺序错误：Semantic UI的JS完全依赖jQuery，你原来先加载了Semantic的JS再加载jQuery，这会直接导致Semantic无法初始化弹窗功能。
2. Popup初始化与触发逻辑问题：你只是在点击td时初始化了popup，但没有主动触发弹窗显示；而且每次点击都重复初始化，容易引发不必要的冲突。
3. 缺少行数据填充逻辑：原代码没有处理把当前点击行的数据传入弹窗的逻辑，无法实现展示行数据的需求。

修复方案 #

1. 调整脚本引入顺序 #

把jQuery放在Semantic UI JS之前引入，确保Semantic能找到依赖的核心库。

2. 优化Popup逻辑 #

• 提前一次性初始化popup，避免重复初始化
• 点击td时先提取当前行数据，填充到弹窗后再手动触发显示

3. 完整修正代码 #

<!-- 先引入jQuery，保证依赖优先加载 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 再引入Semantic UI的样式和脚本 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>

<div class="container" >
  <table class="ui table" id="table" >
    <thead>
      <tr>
        <th>Name</th>
        <th>Registration Date</th>
        <th>E-mail address</th>
        <th>Premium Plan</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Lilki</td>
        <td>September 14, 2013</td>
        <td>jhlilk22@yahoo.com</td>
        <td>No</td>
      </tr>
      <tr>
        <td>Jamie Harington</td>
        <td>January 11, 2014</td>
        <td>jamieharingonton@yahoo.com</td>
        <td>Yes</td>
      </tr>
      <tr>
        <td>Jill Lewis</td>
        <td>May 11, 2014</td>
        <td>jilsewris22@yahoo.com</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="ui custom popup top left transition hidden" id="pop">
  <div class="popup-content"></div>
</div>

<script>
// 提前初始化popup，设置手动触发模式
$('.custom.popup').popup({
  trigger: 'manual'
});

// 监听表格单元格点击事件
$(document).on('click', 'table td', function() {
  // 获取当前点击单元格所在的整行
  const $currentRow = $(this).closest('tr');
  // 提取该行所有单元格的文本内容
  const rowData = $currentRow.find('td').map(function() {
    return $(this).text().trim();
  }).get();
  
  // 格式化行数据，填充到弹窗中
  const popupHtml = `
    <div><strong>姓名:</strong> ${rowData[0]}</div>
    <div><strong>注册日期:</strong> ${rowData[1]}</div>
    <div><strong>邮箱:</strong> ${rowData[2]}</div>
    <div><strong>付费计划:</strong> ${rowData[3]}</div>
  `;
  $('#pop .popup-content').html(popupHtml);
  
  // 触发弹窗在当前点击的单元格位置显示
  $(this).popup('show');
});
</script>

代码说明 #

• 调整了脚本加载顺序，解决了Semantic依赖缺失的问题
• 提前初始化popup并设置手动触发，让我们可以完全控制弹窗的显示时机
• 点击单元格时，通过closest('tr')定位当前行，用map提取所有单元格内容，格式化后填充到弹窗
• 最后调用popup('show')让弹窗在点击位置显示

这样修改后，弹窗就能正常显示，并且会展示当前点击行的完整数据啦！

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