如何在React/纯JavaScript中获取已填充数据的表格td宽度？

1. 等待表格渲染完成 #

外部库生成表格是异步过程，必须等DOM渲染完毕才能获取宽度。如果库没有提供渲染完成的回调，用MutationObserver监听表格容器的变化：

const tableContainer = document.getElementById('your-table-container');
const observer = new MutationObserver((mutations) => {
  const table = tableContainer.querySelector('table');
  if (table && table.querySelector('tbody tr')) {
    observer.disconnect();
    getColumnWidthAndSetupToggle(table);
  }
});

observer.observe(tableContainer, { childList: true, subtree: true });

2. 获取表格列宽 #

表格渲染完成后，直接读取第一行单元格的宽度（假设同列单元格宽度统一）：

function getColumnWidthAndSetupToggle(table) {
  const firstTd = table.querySelector('tbody tr td:first-child');
  const columnWidth = firstTd.offsetWidth; // 含padding和border，用clientWidth则不含border
  const tdStyle = window.getComputedStyle(firstTd);
  setupTextToggle(columnWidth, tdStyle, table);
}

3. 计算单元格可容纳的单词数 #

创建隐藏的测试元素，模拟目标td的样式，逐步添加单词直到接近列宽，统计最大可容纳数量：

function calculateMaxWords(width, style) {
  const testEl = document.createElement('div');
  testEl.style.position = 'absolute';
  testEl.style.visibility = 'hidden';
  testEl.style.font = style.font;
  testEl.style.padding = style.padding;
  testEl.style.whiteSpace = 'nowrap';
  document.body.appendChild(testEl);

  const fullText = testEl.textContent;
  const words = fullText.split(' ');
  let currentText = '';
  let maxWords = 0;

  for (let i = 0; i < words.length; i++) {
    currentText += (i === 0 ? '' : ' ') + words[i];
    testEl.textContent = currentText;
    if (testEl.offsetWidth > width) {
      maxWords = i;
      break;
    }
    maxWords = i + 1;
  }

  document.body.removeChild(testEl);
  return maxWords;
}

4. 实现「显示更多/显示更少」切换 #

根据计算出的最大单词数截断文本，添加切换按钮并绑定逻辑：

function setupTextToggle(columnWidth, tdStyle, table) {
  const tds = table.querySelectorAll('tbody tr td');
  tds.forEach(td => {
    const fullText = td.textContent.trim();
    const words = fullText.split(' ');
    const maxWords = calculateMaxWords(columnWidth, tdStyle);
    
    if (words.length <= maxWords) return;

    const truncatedText = words.slice(0, maxWords).join(' ') + '...';
    td.textContent = truncatedText;

    const toggleBtn = document.createElement('button');
    toggleBtn.textContent = '显示更多';
    toggleBtn.style.marginLeft = '8px';
    toggleBtn.addEventListener('click', () => {
      if (toggleBtn.textContent === '显示更多') {
        td.textContent = fullText;
        toggleBtn.textContent = '显示更少';
      } else {
        td.textContent = truncatedText;
        toggleBtn.textContent = '显示更多';
      }
      td.appendChild(toggleBtn);
    });
    td.appendChild(toggleBtn);
  });
}

注意事项 #

• 若表格列宽不统一，需针对每个td单独计算宽度和可容纳单词数
• 确保测试元素的样式与目标td完全一致，避免计算偏差
• 若库存在分页、排序等数据更新逻辑，需在每次数据刷新后重新执行上述流程

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