我有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文件相同的代碼

回答

首先溶液（到位）

二溶液（單獨的文件）

相關問題