如何实现点击按钮复制HTML表格Mobile No.列内容到剪贴板

直接在页面</body>闭合标签前加入如下JavaScript代码即可实现需求，无需引入任何第三方依赖：

document.getElementById('copy-table-button').addEventListener('click', async function() {
  // 自动匹配表头为「Mobile No.」的列索引
  const table = document.getElementById('myTable');
  const headerCells = table.querySelectorAll('thead th');
  let mobileColIndex = -1;
  headerCells.forEach((th, index) => {
    if (th.textContent.trim() === 'Mobile No.') mobileColIndex = index;
  });
  if (mobileColIndex === -1) return;

  // 提取该列所有手机号
  const rowCells = table.querySelectorAll('tbody tr');
  const mobileList = [];
  rowCells.forEach(row => {
    const targetCell = row.querySelectorAll('td')[mobileColIndex];
    if (targetCell) mobileList.push(targetCell.textContent.trim());
  });

  // 拼接为换行分隔的纯文本写入剪贴板
  const copyText = mobileList.join('\n');
  try {
    // 现代浏览器标准API
    await navigator.clipboard.writeText(copyText);
  } catch (err) {
    // 旧浏览器兼容降级方案
    const tmpTextarea = document.createElement('textarea');
    tmpTextarea.value = copyText;
    tmpTextarea.style.cssText = 'position:fixed;opacity:0;';
    document.body.appendChild(tmpTextarea);
    tmpTextarea.select();
    document.execCommand('copy');
    document.body.removeChild(tmpTextarea);
  }

  // 可选：复制成功按钮提示，不需要可以删除
  const originBtnText = this.textContent;
  this.textContent = '复制成功';
  setTimeout(() => this.textContent = originBtnText, 1500);
});

实现说明 #

• 不硬编码列位置，自动匹配表头为Mobile No.的列，后续调整表格列顺序不需要修改代码
• 复制内容为纯文本格式，所有手机号通过换行符分隔，粘贴到任意表单、文本编辑器时自动每个号码单独占一行，完全匹配要求的格式
• 做了双层兼容：优先使用标准剪贴板API，对不支持新API的旧浏览器自动降级为传统选中复制方案，覆盖绝大多数主流使用场景
• 额外附带复制成功的按钮状态提示，不需要可以直接删除对应代码段

完整可运行代码 #

可以直接替换原有页面代码，打开即可测试效果：

<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
button {
  margin: 12px 0;
  padding: 6px 12px;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<button id="copy-table-button">  Copy Mobile No. </button>
  
<table id="myTable">
 <thead>
   <tr>
    <th>Sl No</th>
    <th>Mobile No.</th>
    <th>Name</th>
    <th>Status</th>
   </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>1234567890</td>
    <td>Maria</td>
    <td>Active</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2223330</td>
    <td>Ruma</td>
    <td>Active</td>
  </tr>
    <tr>
    <td>3</td>
    <td>3334440</td>
    <td>Kumar</td>
    <td>Not-Active</td>
  </tr>
    <tr>
    <td>4</td>
    <td>44455500</td>
    <td>Subba</td>
    <td>Active</td>
  </tr>
    <tr>
    <td>5</td>
    <td>555666111</td>
    <td>Orayyo</td>
    <td>Not-Active</td>
  </tr>
    <tr>
    <td>6</td>
    <td>555666111</td>
    <td>Orayyo</td>
    <td>Active</td>
  </tr>
    <tr>
    <td>7</td>
    <td>555666111</td>
    <td>Orayyo</td>
    <td>Not-Active</td>
  </tr>
  
  </tbody>
</table>

<script>
document.getElementById('copy-table-button').addEventListener('click', async function() {
  const table = document.getElementById('myTable');
  const headerCells = table.querySelectorAll('thead th');
  let mobileColIndex = -1;
  headerCells.forEach((th, index) => {
    if (th.textContent.trim() === 'Mobile No.') mobileColIndex = index;
  });
  if (mobileColIndex === -1) return;

  const rowCells = table.querySelectorAll('tbody tr');
  const mobileList = [];
  rowCells.forEach(row => {
    const targetCell = row.querySelectorAll('td')[mobileColIndex];
    if (targetCell) mobileList.push(targetCell.textContent.trim());
  });

  const copyText = mobileList.join('\n');
  try {
    await navigator.clipboard.writeText(copyText);
  } catch (err) {
    const tmpTextarea = document.createElement('textarea');
    tmpTextarea.value = copyText;
    tmpTextarea.style.cssText = 'position:fixed;opacity:0;';
    document.body.appendChild(tmpTextarea);
    tmpTextarea.select();
    document.execCommand('copy');
    document.body.removeChild(tmpTextarea);
  }

  const originBtnText = this.textContent;
  this.textContent = '复制成功';
  setTimeout(() => this.textContent = originBtnText, 1500);
});
</script>
</body>
</html>

注意：本地直接用file协议打开HTML文件测试时，部分浏览器会限制标准剪贴板API权限，放到本地Web服务或线上服务器运行即可正常触发；降级方案不受file协议限制，本地打开也可正常复制。

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