Python Pandas修改HTML表格DOM元素转义问题及解决方案

一、修复标签被转义的问题 #

场景1：用Pandas生成表格 #

Pandas的to_html()默认会转义HTML特殊字符，必须添加escape=False参数才能保留标签：

import pandas as pd

# 构造示例数据
df = pd.DataFrame({
    'product': ['商品A', '商品B', '商品C'],
    'quantity': [15, 22, 8]
})

# 将quantity列替换为可编辑数字输入框
df['quantity'] = df['quantity'].apply(lambda val: f'<input type="number" value="{val}" min="0">')

# 生成HTML表格，禁用转义
html_table = df.to_html(escape=False, index=False, border=1)

场景2：用BeautifulSoup修改现有纯表格 #

如果是修改已有HTML表格，不要直接给单元格赋值字符串，要通过new_tag()创建真实的DOM元素，避免被转义：

from bs4 import BeautifulSoup

# 源纯表格HTML
source_html = """
<table>
    <tr><th>product</th><th>quantity</th></tr>
    <tr><td>商品A</td><td>15</td></tr>
    <tr><td>商品B</td><td>22</td></tr>
</table>
"""

soup = BeautifulSoup(source_html, 'html.parser')

# 遍历所有数据行（跳过表头行）
for row in soup.find_all('tr')[1:]:
    # 定位quantity列的单元格（假设是第二列）
    qty_cell = row.find_all('td')[1]
    # 创建input标签
    input_tag = soup.new_tag('input', type='number', value=qty_cell.text.strip(), min='0')
    # 替换单元格内容
    qty_cell.clear()
    qty_cell.append(input_tag)

# 输出最终HTML
final_html = str(soup)

二、其他可用于HTML DOM编辑的Python库 #

• lxml：性能优异，支持XPath查询，适合处理大体积HTML文件：

  from lxml import html
  
  tree = html.fromstring(source_html)
  # 用XPath定位所有quantity单元格
  for qty_cell in tree.xpath('//tr[position()>1]/td[2]'):
      input_elem = html.Element('input', type='number', value=qty_cell.text.strip())
      qty_cell.replace(input_elem)
  final_html = html.tostring(tree, encoding='unicode')
  

• PyQuery：模仿jQuery语法，前端开发者上手更快：

  from pyquery import PyQuery as pq
  
  doc = pq(source_html)
  # 定位数据行的第二列，替换为输入框
  doc('tr:gt(0) td:nth-child(2)').each(
      lambda i, elem: pq(elem).replace_with(f'<input type="number" value="{pq(elem).text().strip()}">')
  )
  final_html = doc.html()
  

三、添加提交按钮实现表单提交 #

只需将表格包裹在<form>标签内，再添加提交按钮即可：

用BeautifulSoup实现 #

# 接之前的soup对象
# 创建form标签，指定提交地址和请求方法
form_tag = soup.new_tag('form', action='/your-submit-url', method='post')
# 将表格移入form
soup.html.body.append(form_tag)
form_tag.append(soup.table)
# 添加提交按钮
submit_btn = soup.new_tag('button', type='submit')
submit_btn.string = '提交修改'
form_tag.append(submit_btn)

final_html = str(soup)

用Pandas生成后直接拼接 #

final_html = f"""
<form action="/your-submit-url" method="post">
    {html_table}
    <button type="submit">提交修改</button>
</form>
"""

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