从Pandas DataFrame生成HTML后，JS访问表格行报错求助

错误根源 #

你在使用Python f-string生成HTML模板时，JavaScript代码里的for循环大括号{}被Python误认为是f-string的变量插值占位符。Python尝试解析这些大括号内的内容，但里面是合法的JS代码而非Python表达式，因此抛出语法错误。

解决方法 #

1. 转义f-string中的大括号

在JavaScript代码的所有大括号前额外添加一个大括号，用{{替代{，}}替代}，让Python将其识别为普通字符而非插值标记。

修改后的script段代码：

<script type="text/javascript">
var array = document.getElementById("table").rows
for (let i = 0; i < array.length; ++i) {{
        var elem = array[i].cells[1].innerHTML;
        document.getElementById("table").rows[i].cells[1].innerHTML = "<a href='#test'>" + elem +"</a>"
        document.write(document.getElementById("table").rows[i].cells[1].innerHTML)
}}
</script>

2. 替代方案：使用jQuery简化操作

既然你已经引入了jQuery和DataTables，不妨用jQuery语法更简洁地处理表格，同时同样需要注意转义大括号：

<script type="text/javascript">
$(document).ready(function() {{
    $('#table').DataTable();
    $('#table tbody tr').each(function() {{
        var elem = $(this).find('td:eq(1)').html();
        $(this).find('td:eq(1)').html('<a href="#test">' + elem + '</a>');
    }});
}});
</script>

额外提示 #

• 尽量避免在f-string中嵌入包含大量大括号的代码，转义虽然有效但会降低代码可读性。
• 也可以选择将HTML模板放在单独的文件中，通过读取文件的方式生成内容，彻底避免字符串插值的冲突问题。

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