如何使用JavaScript获取点击行内按钮时的该行数据？

下面针对不同技术栈给出具体实现方式，核心思路都是让点击事件能关联到当前行对应的数据源：

原生JavaScript方案 #

适合无框架的场景，推荐用事件委托提升性能（尤其当表格行数量较多时）：

<table id="productTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>商品名称</th>
      <th>价格</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 这里通过JS循环渲染行 -->
  </tbody>
</table>

<script>
// 模拟产品数据源
const products = [
  { id: 1, name: "商品A", price: 99 },
  { id: 2, name: "商品B", price: 199 },
  { id: 3, name: "商品C", price: 299 }
];

// 渲染表格行
const tableBody = document.querySelector('#productTable tbody');
products.forEach(product => {
  const row = document.createElement('tr');
  // 把产品序列化为JSON存在按钮的data属性中
  row.innerHTML = `
    <td>${product.id}</td>
    <td>${product.name}</td>
    <td>${product.price}</td>
    <td><button class="add-to-cart" data-product='${JSON.stringify(product)}'>Add to cart</button></td>
  `;
  tableBody.appendChild(row);
});

// 用事件委托监听点击
document.querySelector('#productTable').addEventListener('click', (e) => {
  if (e.target.classList.contains('add-to-cart')) {
    // 解析data属性中的产品数据
    const targetProduct = JSON.parse(e.target.dataset.product);
    console.log('要添加的商品:', targetProduct);
    // 这里执行添加到购物车的逻辑，比如把targetProduct存入购物车数组
  }
});
</script>

React方案 #

在React的map循环中，直接将当前行的产品对象作为参数传入点击回调：

import { useState } from 'react';

function ShoppingCartTable() {
  // 模拟产品数据
  const [products] = useState([
    { id: 1, name: "商品A", price: 99 },
    { id: 2, name: "商品B", price: 199 },
    { id: 3, name: "商品C", price: 299 }
  ]);

  const handleAddToCart = (product) => {
    console.log('添加到购物车的商品:', product);
    // 这里实现购物车逻辑，比如更新购物车状态
  };

  return (
    <table border="1">
      <thead>
        <tr>
          <th>ID</th>
          <th>商品名称</th>
          <th>价格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {products.map(product => (
          <tr key={product.id}>
            <td>{product.id}</td>
            <td>{product.name}</td>
            <td>{product.price}</td>
            <td>
              {/* 直接把当前product传入点击方法 */}
              <button onClick={() => handleAddToCart(product)}>Add to cart</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default ShoppingCartTable;

Vue方案 #

Vue的v-for循环中，同样可以直接将当前项作为参数传递给点击方法：

<template>
  <table border="1">
    <thead>
      <tr>
        <th>ID</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="product in products" :key="product.id">
        <td>{{ product.id }}</td>
        <td>{{ product.name }}</td>
        <td>{{ product.price }}</td>
        <td>
          <!-- 直接传入当前product -->
          <button @click="handleAddToCart(product)">Add to cart</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import { ref } from 'vue';

// 模拟产品数据
const products = ref([
  { id: 1, name: "商品A", price: 99 },
  { id: 2, name: "商品B", price: 199 },
  { id: 3, name: "商品C", price: 299 }
]);

const handleAddToCart = (product) => {
  console.log('添加到购物车的商品:', product);
  // 这里实现购物车逻辑，比如添加到购物车数组
};
</script>

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