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

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

转载作者：行者123 更新时间：2023-12-03 06:35:42

25

4

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

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

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

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

当我单击链接时，脚本应加载相应的 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

文章推荐： javascript - 所有帖子上都有模糊功能

文章推荐： javascript - 验证 : remove custom success message when error occurs

文章推荐： JavaScript 全选按钮不起作用

文章推荐： javascript - Vue.js 中的同级组件与 vue-router ？

Java//冗余
我有下面提供的“示例代码”，我觉得这很多余，并且想请您与我一起解释是否有任何更少冗余的方法来处理以下代码。 public interface Bars { FOO1 FOO1 = (FOO1)
caching - AppFabric 冗余
我们刚刚测试了一个由 2 个服务器组成的 AppFabric 集群，我们在其中删除了“领导”服务器。第二个服务器对它的任何请求超时并出现错误: Microsoft.ApplicationServer.
mysql - 数据库模式中的外键过多(冗余？)
我正在设计一个关系数据库 - 底层是 MySQL - DBDesigner 4 . 我有 3 个表:module、page 和 lang。每个模块属于一个页面，每个页面都有特定的语言: 外键 pag
java - 冗余 If 消息
我的 Fraction 程序运行流畅，但 NetBeans IDE 告诉我以下 if 是多余的: public boolean equals(Object other) { Fraction bo
python - 冗余 If 语句和正则表达式
下面的代码显然是多余的，但根据我的经验，我经常使用这种模式。有没有更好的方法在 python 中执行此操作？ if re.search("at (\d{1,2}):\d{2}", p): a=
java - 当组件已经测试时测试复合对象 ->冗余？
我有一个用具体示例说明的一般性问题。当所有组件对象都已测试时，您建议对复合对象进行多少测试？作为具体示例，请考虑下面的 NullTerminatedStringReader。它从字节缓冲区中读取一个
java - 冗余 If 语句警告
if ( a > b) { return true; } return false; 对于上面的代码，Netbeans 给出了 “Redundant if statement” 警告并建议将其更改
SQL 冗余 NOT NULL 约束
当我添加一些约束时，例如: create table Test( IDTest int primary key, Credit int not null constraint Credit
c - 冗余 __packed__ 属性
此代码适用于 Microchip 的 PIC32MX 微处理器。他们的编译器本质上是 GCC 3.4。我倾向于使用 GCC 的 __packed__ attribute将位域打包到一个 union
Golang 类型切换需要(冗余)类型断言
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
ios - 如何防止数据库中的APNS设备 token 冗余
我正在为我的应用程序使用apns通知，为此，我将apns设备 token 存储在我的sql数据库中。问题在于，每次用户删除或安装该应用程序时，它都会生成一个新的设备 token ，并将其存储在数据库
mysql - 冗余 MySQL 索引？
Action Keyname Type Unique Packed Column Cardinality Collation Null Comment Edit Dro
c - 冗余 IRQ 清除挂起操作
我正在开发一个使用 ARM Cortex-M0 处理器的项目。在这个项目中，我需要提供计时器支持(CMSDK (SSE-200)计时器)。因此，在 vector 表中，在 TIMER0_IRQn 表
java - CorsFilter setAllowedOrigins(*) 冗余
有没有写的理由 corsFilter.setAllowedOrigins(new HashSet(Arrays.asList("*"))); 其中allowedOrigins在ReSTLet框架中的定
HTML 页面 - 页眉和页脚 - 冗余
我正在创建一个包含 4 个链接的 HTML/CSS 页面， Home.html Details.html ContactMe.html AboutUs.html 我想在所有关联的 HTML 页面中将其
c++ - 如何避免两个不同头文件中的 typedef 冗余？
我试图理解并使用其他人编写的代码，但由于我对 typedef 经验不多。 , 我有时会感到困惑。有两个不同的头文件，一个继承另一个，并且在两个文件上声明相同的typedef。为什么会出现冗余，如何
html - CSS 中选择器的速度/冗余
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
android - 避免改造 POJO 冗余
我有一个用于改造的 POJO 类。 public class AppData(){ String a; String b; String c;
c# - 冗余 ToString 代码？
我想知道: 编写这段代码: DataRow[] g = new DataRow[1] ; var t=new StringBuilder().AppendFormat("{0}", g[0]["a
c# - 冗余 "using"是否会降低性能
只是一个性能问题...... 假设我有 5 个类，每个类都引用了 System.Data 和一个自己开发的库。这 5 个类是类库的一部分，最终将被构建并发布到一些 Web 应用程序作为引用。通过将引

首页

博学

6Ren·AI

商城

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