如何通过JS为导航菜单a标签添加popover-link-a类实现无数据弹窗提示

• 当页面主体中的表格（grid）无数据时，为导航菜单对应<li>组件内的<a>标签添加popover-link-a类
• 同时为该<a>标签配置弹窗相关属性，点击时显示无数据提示信息

示例对比 #

原始HTML结构 #

<li id="tecrube" runat="server"><a href="#tecrube" class="section-link">İş Tecrübesi</a></li>

修改后HTML结构 #

<li id="tecrube" runat="server">
  <a
    class="popover-link-a section-link"
    href="#tecrube" data-toggle="popover"
    title="İş Tecrübesi"
    data-content="İş Tecrübesi Boştur !"
    data-original-title="İş Tecrübesi" onclick="javascript:return false;">
    İş Tecrübesi
  </a>
</li>

JavaScript实现方案 #

步骤说明 #

1. 定义导航项与表格的映射配置：关联每个导航的选择器、对应表格的选择器、弹窗标题和提示内容
2. 实现表格无数据判断函数：检查目标表格是否为空（比如无数据行或显示空状态提示）
3. 实现导航项修改函数：根据表格状态，为对应导航的<a>标签添加类和弹窗属性
4. 页面加载完成后执行初始化逻辑

完整代码 #

// 导航与表格的映射配置，可根据实际情况扩展
const navGridMap = [
  {
    navSelector: '#tecrubeMenu a',
    gridSelector: '#tecrube-grid', // 替换为实际表格的选择器
    title: 'İş Tecrübesi',
    content: 'İş Tecrübesi Boştur !'
  },
  {
    navSelector: '#navIletisimBilgileri a',
    gridSelector: '#iletisim-grid', // 替换为实际表格的选择器
    title: 'İletişim Bilgileri',
    content: 'İletişim Bilgileri Boştur !'
  },
  {
    navSelector: '#navKisiselDurum a',
    gridSelector: '#kisisel-durum-grid', // 替换为实际表格的选择器
    title: 'Kişisel Durum',
    content: 'Kişisel Durum Bilgileri Boştur !'
  },
  // 可继续添加其他导航项的配置
];

// 判断表格是否无数据的函数，需根据实际表格结构调整
function isGridEmpty(gridSelector) {
  const grid = document.querySelector(gridSelector);
  if (!grid) return false;
  
  // 示例逻辑：判断表格tbody是否无数据行，或存在空状态元素
  const dataRows = grid.querySelectorAll('tbody tr:not(.empty-row)');
  return dataRows.length === 0;
}

// 修改导航项的函数
function updateNavForEmptyGrid(navConfig) {
  const navLink = document.querySelector(navConfig.navSelector);
  if (!navLink) return;

  // 添加popover相关类和属性
  navLink.classList.add('popover-link-a');
  navLink.setAttribute('data-toggle', 'popover');
  navLink.setAttribute('title', navConfig.title);
  navLink.setAttribute('data-content', navConfig.content);
  navLink.setAttribute('data-original-title', navConfig.title);
  navLink.setAttribute('onclick', 'javascript:return false;');
  
  // 初始化Bootstrap Popover（如果使用Bootstrap）
  if (typeof $.fn.popover !== 'undefined') {
    $(navLink).popover({
      trigger: 'click',
      placement: 'right' // 可根据需求调整弹窗位置
    });
  }
}

// 初始化函数
function initEmptyGridNavHandlers() {
  navGridMap.forEach(config => {
    if (isGridEmpty(config.gridSelector)) {
      updateNavForEmptyGrid(config);
    }
  });
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', initEmptyGridNavHandlers);

注意事项 #

• 请将代码中的gridSelector替换为页面中对应表格的实际选择器
• 如果项目使用Bootstrap，确保已引入Bootstrap的JS和CSS文件，否则弹窗可能无法正常显示
• 可根据实际需求扩展navGridMap中的配置项，覆盖所有需要处理的导航菜单

内容的提问来源于stack exchange，提问作者Haluk Öztürk