我有4-5个html文件，基本上读取csv文件与D3.js并将它们转换成表。问题是每个html文件使用完全相同的代码，只是读取不同的csv文件。因此，一方面在每个html的代码独特的是一个行：如何避免与HTML代码冗余 - 不希望多个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作为参数？该函数基本上会构建整个表格模板。

来源

2016-07-06 keslami

选择一个模板语言，无论是服务器端编程语言或编译时的预处理程序与使用。 – Quentin

PHP包含对我来说像一个魅力的工作。 –

如何阅读URL查询，并将相应的CSV加载到一个HTML文件中？ – Nekomajin42

将一个点击监听器附加到每个'download csv'锚点。将this.getAttribute（“href”）传递给d3.csv方法。

来源

2016-07-06 20:06:00

问题在于下载csv完全是这样，它下载.csv。事件侦听器必须附加到“下载CSV”按钮之前的按钮。该文件的href是html文件，其中Download CSV的href是csv的路径。 – keslami

我编辑了我的原始问题以包含index.html中的代码片段。 – keslami

首先溶液（到位）

// collect every link with the .show class 
 
var links = document.querySelectorAll(".show"); 
 
// bind an event listener to each 
 
for (var i=0; i<links.length; i++) 
 
{ 
 
    links[i].addEventListener("click", function(e) 
 
    { 
 
     // prevent default link behavior 
 
     e.preventDefault(); 
 
     // get the path of the file 
 
     var path = e.target.href; 
 
     // use it 
 
     d3.csv(path, function(error, data) 
 
     { 
 
      // insert code here to build the table 
 
     }); 
 
    }); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="menu"> 
 
    <ul> 
 
    <li><a class="show" href="dir/file1.csv">File 1</a> | <a class="download" href="dir/file1.csv">(Download File 1)</a></li> 
 
    <li><a class="show" href="dir/file2.csv">File 2</a> | <a class="download" href="dir/file2.csv">(Download File 2)</a></li> 
 
    <li><a class="show" href="dir/file3.csv">File 3</a> | <a class="download" href="dir/file3.csv">(Download File 3)</a></li> 
 
    </ul> 
 
</div> 
 
<div id="table"> 
 
    <!-- draw the table here --> 
 
</div>

二溶液（单独的文件）

<!-- this goes to index.html --> 
 

 
<ul> 
 
    <li><a class="show" href="table.html?csv=file1" target="_blank">File 1</a> | <a class="download" href="dir/file1.csv">(Download File 1)</a></li> 
 
    <li><a class="show" href="table.html?csv=file2" target="_blank">File 2</a> | <a class="download" href="dir/file2.csv">(Download File 2)</a></li> 
 
    <li><a class="show" href="table.html?csv=file3" target="_blank">File 3</a> | <a class="download" href="dir/file3.csv">(Download File 3)</a></li> 
 
</ul> 
 

 

 

 
<!-- this goes to table.html --> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<script> 
 
// bind an event listener to run the script right after the page is loaded 
 
window.addEventListener("DOMContentLoaded", function() 
 
{ 
 
    // get the whole query part of the URL 
 
    var query = location.search; 
 
    
 
    // strip the "?" char from the beginning 
 
    query = query.slice(1); 
 
    
 
    // check if there are multiple queries (make it foolproof) 
 
    var queryArray = query.split("&"); 
 
    
 
    // check if there is a query with the "csv" property 
 
    var file; 
 
    for (var i=0; i<queryArray.length; i++) 
 
    { 
 
    // does it start with "csv="? 
 
    if (queryArray[i].slice(0, 4) === "csv=") 
 
    { 
 
     // if it does, get the rest of the string 
 
     file = queryArray[i].slice(4); 
 
    } 
 
    } 
 
    
 
    // now you have the file name, let's create a path 
 
    var path = "dir/"+file+".csv"; 
 
    
 
    // then build the table 
 
    d3.csv(path, function(error, data) 
 
    { 
 
    // insert code here to build the table 
 
    }); 
 
}); 
 
</script>

来源

2016-07-06 20:30:15 Nekomajin42

我明白了。这将工作得很好，但我确实需要在单独的html上生成这些表。我编辑了我的原始问题，向您显示我的index.html页面。事件监听器必须位于第一个按钮上，但该按钮的href只是html页面。我怎样才能附加文件路径？ – keslami

你可以使用URL的查询部分来完成。看看编辑的答案。 – Nekomajin42

我不明白我如何使用table.html单独的.html文件。 table.html是我创建并放置在index.html所在目录中的文件吗？例如，当我点击'弧'是从table.html完成的工作，或者我应该从table.html调用脚本到arc.html？ – keslami

您可以使用下面的共同de，它不需要服务器端代码。关键是使用查询字符串将文件名传递给d3 html页面。

<!-- index.html --> 
 
<ul> 
 
    <li><a href="resdisplay/display.html?name=arc">Arc</a> | <a href="/reservations/arc.csv">(Download CSV)</a></li> 
 
    <li><a href="resdisplay/display.html?name=coral">Coral</a> | <a href="/reservations/coral.csv">(Download CSV)</a></li> 
 
</ul> 
 

 
<!-- display.html --> 
 
<script> 
 
    // Get file name from the query string 
 
    function getParameterByName(url, name) { 
 
     if (!url) url = window.location.href; 
 
     name = name.replace(/[\[\]]/g, "\\$&"); 
 
     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
 
      results = regex.exec(url); 
 
     if (!results) return null; 
 
     if (!results[2]) return ''; 
 
     return decodeURIComponent(results[2].replace(/\+/g, " ")); 
 
    } 
 
    
 
    var fileName = getParameterByName(window.location.href, "name");  
 
    d3.csv("../reservations/" + fileName + ".csv", function(error, data) { ... }); 
 
    
 
</script>

来源

2016-07-07 15:32:17 engineforce

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

回答

首先溶液（到位）

二溶液（单独的文件）

相关问题