gpt4 book ai didi

javascript - 如何避免 HTML 代码冗余——不希望多个 html 文件使用相同的代码

转载 作者:行者123 更新时间:2023-12-03 06:35:42 25 4
gpt4 key购买 nike

我有 4-5 个 html 文件,它们本质上是使用 D3.js 读取 csv 文件并将它们转换为表格。问题是每个 html 文件都使用完全相同的代码,只是读取不同的 csv 文件。因此,每个 .html 代码中唯一的一件事就是这一行:

d3.csv("../reservations/arc.csv", function(error, data) 

我猜这不是唯一的方法。如果我的问题有点令人困惑,我深表歉意。我不完全确定我是否已经清楚地表达了我正在寻求的内容,但请让我知道任何需要的澄清。

以下是网站上所有页面的布局:

URL

当我单击链接时,脚本应加载相应的 csv。

我假设我需要使用上面的代码创建一个模板,然后将参数传递到该行 d3.csv(csv) 中,但我真的不确定如何做。在我看来,这是最简单的出路。

index.html 页面如下所示:

<head>
<title>AWS EC2 Instances</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(function(){
$("#includedContent").load("date.html");
});
</script>
</head>
<html>
<h1>Show EC2 Instances, Owners & Reservation Status</h1>

<h2>Account</h2>
<ul>
<li><a href="/resdisplay/arc.html">Arc</a> | <a href="/reservations/arc.csv">(Download CSV)</a></li>
<li><a href="/resdisplay/coral.html">Coral</a> | <a href="/reservations/coral.csv">(Download CSV)</a></li>
<li><a href="/resdisplay/dw.html">Data Warehouse</a> | <a href="/reservations/dw.csv">(Download CSV)</a></li>
<li><a href="/resdisplay/elections.html">Elections</a> | <a href="/reservations/elections.csv">(Download CSV)</a></li>
<li><a href="/resdisplay/enterprise.html">Enterprise</a> | <a href="/reservations/enterprise.csv">(Download CSV)</a></li>
<li><a href="/resdisplay/inf.html">Inf</a> | <a href="/reservations/inf.csv">(Download CSV)</a></li>
<li><a href="/resdisplay/main.html">Main</a> | <a href="/reservations/main.csv">(Download CSV)</a></li>
<li><a href="/resdisplay/news.html">News</a> | <a href="/reservations/news.csv">(Download CSV)</a></li>
<li><a href="/resdisplay/nile.html">Nile</a> | <a href="/reservations/nile.csv">(Download CSV)</a></li>
<li><a href="/resdisplay/pci.html">Compliance (PCI)</a> | <a href="/reservations/pci.csv">(Download CSV)</a></li>
<li><a href="/resdisplay/platform.html">Platform</a> | <a href="/reservations/platform.csv">(Download CSV)</a></li>
<li><a href="/resdisplay/sandbox.html">Sandbox</a> | <a href="/reservations/sandbox.csv">(Download CSV)</a></li>
<li><a href="/resdisplay/video.html">Video</a> | <a href="/reservations/video.csv">(Download CSV)</a></li>
</ul>
<p>
<div align="center">

我对 html/js 不太熟悉,非常感谢您的帮助。谢谢!

编辑 - 我的问题已经分支:

我可以创建一个单独的 .js 文件来创建表(用作模板),然后在该 js 文件中创建一个以 csv 作为参数的函数吗?该函数本质上会构建整个表模板。

最佳答案

将点击监听器附加到每个“下载 csv” anchor 。将 this.getAttribute("href") 交给 d3.csv 方法。

关于javascript - 如何避免 HTML 代码冗余——不希望多个 html 文件使用相同的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38230621/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com