如何解决在javascript函数中访问字典/ json来填充表时出现问题
概述: 我正在使用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中,您需要修复以下三件事:
-
要编辑iframe的HTML内容,您应该设置
.srcdoc
元素,而不是.src
-
document.getElementsByName()
函数将返回HTML元素数组,因此,要获取所需的元素,请执行以下操作之一:- (建议)切换为使用
document.getElementById
并在iframe代码中使用id='table_frame'
- 使用
document.getElementsByName('table_frame')[0]
选择数组的第一个元素
- (建议)切换为使用
-
您用作函数触发器的锚标记会将您重定向回原始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)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。