Q: How to avoid redundancy with HTML code -- do not want same code for multiple html files I have 4-5 html files that essentially read in csv files with D3.js and convert them into tables.  The problem is that each html file uses the exact same code, just reads a different csv file. So the one thing unique in the code for each .html is this one line: 
d3.csv("../reservations/arc.csv", function(error, data) 

I'm guessing this is not the only way going about doing this.  I apologize if my question is a little confusing..I'm not entirely sure if I have made it clear what I'm seeking exactly, but please let me know any clarifications needed.
Here is the layout of all the pages on the site: 
 
When I click on a link, the script should load the corresponding csv. 
I'm assuming that I need to make a template with the code above and then pass a parameter into that line d3.csv(csv) but I am really not sure how. This is the easy way out, as I see it.   
Here is what the index.html page looks like:
<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">

I'm not too familiar with html/js, your help would be greatly appreciated.   Thanks! 
EDIT - my question has branched: 
Can I just create a separate .js file that creates the table (serves as the template) and then create a function within that js file, that takes a csv as a parameter? The function would essentially build the entire table template. 

A: Attach a click listener to each 'download csv' anchor. Hand this.getAttribute("href") to the d3.csv method.

A: First solution (in place)


// 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>


Second solution (separate file)


<!-- 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>



A: You can use following code, which does not require server side code. The key is pass the file name to the d3 html page using query string.


<!-- 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>


