如何在点击事件脚本中为表格内按钮添加Bootstrap加载Spinner？

首先你的按钮HTML存在语法错误，这大概率是脚本失效的核心原因：原代码里的id='buitton1" ?>'引号嵌套混乱，浏览器无法正确解析这个按钮元素，自然无法触发后续的点击事件逻辑。先修正按钮的HTML：

<td><button type="button" class="btn btn-primary" id="button1">Edit</button></td>

接下来提供两种可行的实现方式，任选其一即可：

方式一：使用insertAdjacentHTML（修正后） #

确保正确绑定点击事件，以下是完整的脚本代码：

// 获取按钮元素
const editBtn = document.getElementById('button1');

// 绑定点击事件
editBtn.addEventListener('click', function(e) {
  // 先清空按钮原有内容（可选，避免重复添加spinner）
  this.innerHTML = '';
  // 添加Spinner到按钮内部开头
  this.insertAdjacentHTML('afterbegin', '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
  // 可追加加载文本
  this.insertAdjacentHTML('beforeend', ' Loading...');
  // 禁用按钮防止重复点击（可选）
  this.disabled = true;

  // 这里写你的异步逻辑，比如接口请求
  // 模拟请求完成后恢复按钮状态
  setTimeout(() => {
    this.innerHTML = 'Edit';
    this.disabled = false;
  }, 2000);
});

方式二：使用createElement创建元素（更稳妥） #

这种方式可避免HTML字符串转义问题，适合复杂元素创建：

const editBtn = document.getElementById('button1');

editBtn.addEventListener('click', function() {
  // 清空并禁用按钮
  this.innerHTML = '';
  this.disabled = true;

  // 创建Spinner元素
  const spinner = document.createElement('span');
  spinner.className = 'spinner-border spinner-border-sm';
  spinner.setAttribute('role', 'status');
  spinner.setAttribute('aria-hidden', 'true');

  // 创建加载文本节点
  const loadingText = document.createTextNode(' Loading...');

  // 添加到按钮内
  this.appendChild(spinner);
  this.appendChild(loadingText);

  // 模拟异步操作完成后恢复
  setTimeout(() => {
    this.innerHTML = 'Edit';
    this.disabled = false;
  }, 2000);
});

关键注意点： #

• 必须先修正按钮的HTML语法错误，否则元素无法被正确选中或绑定事件
• 若要防止重复点击，记得加载时禁用按钮，操作完成后恢复
• 可根据需求调整Spinner的位置（比如beforeend放在文本后面）

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