如何在DataFrame每一行旁添加Widget按钮？

我想要在DataFrame的每一行旁添加按钮，以下是我当前的代码：

PRO_name_list = []
c.execute("SELECT pro_name FROM PRODUCT ORDER BY pro_name ASC")
for row in c:
  PRO_name_list.append(row[0])

PRO_price_list = []
c.execute("SELECT pro_price FROM PRODUCT ORDER BY pro_name ASC")
for row in c:
  PRO_price_list.append(row[0])

PRO_id_list = []
c.execute("SELECT pro_id FROM PRODUCT ORDER BY pro_name ASC")
for row in c:
  PRO_id_list.append(row[0])

d = []
for names in PRO_name_list:
  for row in PRO_id_list:
    if PRO_name_list.index(names) == PRO_id_list.index(row):
     d.append([names, "${0:.1f}".format(PRO_price_list[PRO_name_list.index(names)])]) 
     HOM_rowHBox = widgets.HBox([HOM_addtocart_button])
     display(widgets.VBox([HOM_rowHBox]))

df = pd.DataFrame(data=d,columns=None)
display(df.style
     .hide_index()
     .hide_columns())

当前输出：

期望效果：

我不知道该如何实现这一需求，且在Stack Overflow上未找到能理解的类似问题，希望有人能告知实现该问题的方法。谢谢。

你当前的代码存在几个核心问题：多次重复查询数据库效率低、嵌套循环匹配索引完全冗余、按钮和DataFrame分离显示导致无法对应每行。下面是两种可行的实现方案：

方案1：用ipywidgets直接构建带按钮的表格（推荐） #

直接用组件组装行结构，让商品信息和按钮天然对应，无需依赖DataFrame：

import ipywidgets as widgets
import pandas as pd

# 优化数据库查询：一次性获取所有需要的字段
c.execute("SELECT pro_id, pro_name, pro_price FROM PRODUCT ORDER BY pro_name ASC")
product_data = c.fetchall()

# 定义按钮点击逻辑（示例：打印商品ID）
def add_to_cart(pro_id):
    print(f"已添加商品ID {pro_id} 到购物车")

# 组装每行的组件
rows = []
for pro_id, pro_name, pro_price in product_data:
    # 创建商品名称、价格标签
    name_label = widgets.Label(value=pro_name)
    price_label = widgets.Label(value=f"${pro_price:.1f}")
    # 创建绑定当前商品ID的按钮
    cart_btn = widgets.Button(description="加入购物车", button_style="success")
    cart_btn.on_click(lambda btn, pid=pro_id: add_to_cart(pid))
    # 把当前行的组件横向排列
    row_hbox = widgets.HBox([name_label, price_label, cart_btn], layout={"justify_content": "space-between", "padding": "5px 0"})
    rows.append(row_hbox)

# 把所有行纵向组装成表格样式
display(widgets.VBox(rows, layout={"border": "1px solid #eee", "padding": "10px"}))

方案2：将按钮嵌入DataFrame的HTML渲染 #

如果希望保留DataFrame的样式，可通过HTML渲染把按钮嵌入单元格：

from IPython.display import HTML

# 同样先一次性获取数据
c.execute("SELECT pro_id, pro_name, pro_price FROM PRODUCT ORDER BY pro_name ASC")
product_data = c.fetchall()

# 构建带按钮的HTML表格
html_content = """
<style>
.table-custom {border-collapse: collapse; width: 100%; margin: 10px 0;}
.table-custom th, .table-custom td {border: 1px solid #eee; padding: 8px; text-align: left;}
.table-custom button {background: #2ecc71; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer;}
</style>
<table class="table-custom">
    <tr><th>商品名称</th><th>价格</th><th>操作</th></tr>
"""

for pro_id, pro_name, pro_price in product_data:
    html_content += f"""
    <tr>
        <td>{pro_name}</td>
        <td>${pro_price:.1f}</td>
        <td><button onclick='addCart({pro_id})'>加入购物车</button></td>
    </tr>
    """

html_content += "</table>"

# 添加JS交互逻辑（可选，用于前端处理点击事件）
js_code = """
<script>
function addCart(pro_id) {
    console.log('添加商品ID ' + pro_id + ' 到购物车');
    // 可在此添加后端请求等逻辑
}
</script>
"""

# 渲染最终内容
display(HTML(js_code + html_content))

内容的提问来源于stack exchange，提问作者lee ho wang