如何用Javascript/jQuery点击表格按钮获取所在行首个单元格首字符？

嘿，这个需求很容易实现，我给你两种实用的方案，原生JS和jQuery版本的，你看哪个更适合你的项目：

首先先把你的表格补全（给表格加个ID方便定位）：

<table id="targetTable">
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td><input type="button" value="获取首字符"></td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td><input type="button" value="获取首字符"></td>
    </tr>
  </tbody>
</table>

然后用事件委托的方式绑定点击事件，这种方式的好处是哪怕之后动态添加新行，按钮也能正常工作：

// 获取表格元素
const table = document.getElementById('targetTable');

// 给表格绑定点击事件
table.addEventListener('click', function(e) {
  // 确认点击的是按钮
  if (e.target.tagName === 'INPUT' && e.target.type === 'button') {
    // 找到按钮所在的行
    const currentRow = e.target.closest('tr');
    // 获取第一个单元格的文本内容，去掉多余空格
    const firstCellContent = currentRow.querySelector('td:first-child').textContent.trim();
    // 提取第一个字符
    const firstChar = firstCellContent.charAt(0);
    
    // 这里替换成你需要的业务逻辑，比如传给你的函数
    console.log('获取到的首字符：', firstChar);
    alert(firstChar); // 示例：弹出字符
  }
});

如果你项目里已经在用jQuery，代码会更简洁：

// 同样给表格加ID，然后绑定事件委托
$('#targetTable').on('click', 'input[type="button"]', function() {
  // 找到当前行的第一个单元格，提取首字符
  const firstChar = $(this).closest('tr').find('td:first').text().trim().charAt(0);
  
  // 执行你的逻辑
  console.log(firstChar);
  alert(firstChar);
});

两种方案的核心逻辑是一致的：捕获按钮点击事件 → 定位按钮所在的行 → 找到该行第一个单元格 → 提取内容的第一个字符。事件委托的方式比给每个按钮单独绑定事件更高效，也能适配动态新增的行~

内容的提问来源于stack exchange，提问作者Kevin H.