在javascript函数中访问字典/ json来填充表时出现问题

编程问答 2022-11-01

问题描述

概述： 我正在使用Python创建网页，并在我的代码中同时生成html和javascript。此外，我正在解析csv文件并将其表数据转换为html。我希望能够单击一行文本，然后将该文本的关联表数据加载到当前活动网页上的iframe中。我遇到的问题是我的javascript函数无法识别我发送给它的键以检索相应的表数据。如果我手动输入键以返回表数据，则将返回正确的数据-尽管该表未加载。但是，如果我以编程方式生成密钥，即使字符串看起来相同，它也会返回“ undefined”。

目标： 我需要弄清楚语法或我用来尝试检索表数据的键的格式是否有问题。其次，我需要弄清楚为什么表数据没有正确地加载到我的iframe中。

示例：

import pandas

opening_html =  """<!DOCTYPE html><h1> Test</h1><div style="float:left">"""
table_html = pandas.DataFrame({'Col_1':['this','is','a','test']}).to_html()
tables_dict = {'test-1 00': table_html}
java_variables = "%s" % json.dumps(tables_dict)
table_frame = """<iframe name="table_frame" style="position:fixed; top:100px; width:750; height:450"></iframe>"""
test_link_text = """<a href='' onclick="send_table_data(this);"> test-1</a><br>"""
java = """<script type='text/javascript'>
            var table_filename = """ + java_variables + ";"
            
java += """function send_table_data(obj) {
            var t = obj.text + ' 00';
            alert(t)
            //This line below will not work
            var table_data = table_filename[t];
            //But this line will return the correct value
            var table_data = table_filename['test-1 00'];
            alert(table_data);
            //This line should load the data,but does nothing
            document.getElementsByName('table_frame').src = table_data;
        }
        </script>"""

html_text = """<head>
                <link rel="stylesheet" href="style.css">
                </head>""" + test_link_text + table_frame + """<body>""" + "</div>" + java + '</body>'

with open('test_table_load.html','w') as w:
    w.write(html_text)

编辑：我只是弄清楚了由于某种原因，在var t的开头有一个默认空间-因此使用trim（）似乎可以解决该问题。现在，剩下的唯一问题就是为什么数据不会加载到表中。

解决方法

您似乎在弄错了您输入错字的空间，这是您的第二个问题。

您的代码

因此，要使表格填充到iframe中，您需要修复以下三件事：

  1. 要编辑iframe的HTML内容，您应该设置.srcdoc元素，而不是.src

  2. document.getElementsByName()函数将返回HTML元素数组，因此，要获取所需的元素，请执行以下操作之一：

    • （建议）切换为使用document.getElementById并在iframe代码中使用id='table_frame'
    • 使用document.getElementsByName('table_frame')[0]
      • 选择数组的第一个元素

  3. 您用作函数触发器的锚标记会将您重定向回原始HTML页面，从而使您无法看到javascript函数所做的任何更改。一个简单的解决方案是切换为使用<button>元素代替<a>。

以下是修复后的代码：

import pandas
import json

opening_html =  """<!DOCTYPE html><h1>Test</h1><div style="float:left">"""
table_html = pandas.DataFrame({'Col_1':['this','is','a','test']}).to_html()
tables_dict = {'test-1 00': table_html}
java_variables = "%s" % json.dumps(tables_dict)
table_frame = """<iframe id="table_frame" style="position:fixed; top:100px; width:750; height:450"></iframe>"""
test_link_text = """<button href='' onclick="send_table_data(this);"> test-1</button><br>"""
java = """<script type='text/javascript'>
            var table_filename = """ + java_variables + ";"
            
#for the button,innerText needs to be used to get the button text
java += """function send_table_data(obj) {
            var t = obj.innerText + ' 00';
            alert(t)
            //This line below will not work
            var table_data = table_filename[t];
            //But this line will return the correct value
            var table_data = table_filename['test-1 00'];
            alert(table_data);
            //This line should load the data,but does nothing
            document.getElementById('table_frame').srcdoc = table_data;
        }
        </script>"""

html_text = """<head>
                <link rel="stylesheet" href="style.css">
                </head>""" + test_link_text + table_frame + """<body>""" + "</div>" + java + '</body>'

with open('test_table_load.html','w') as w:
    w.write(html_text)

其他建议

我强烈建议研究一些可以帮助您生成网站的python框架，这些框架可以使用Flask之类的HTML模板，也可以帮助使用Python生成HTML的库。 （我建议您当前的用例为Dash）

iframejavascriptpython