We'll start by selecting all columns, and then change the code to show only title and year.
Hit Go to get a preview.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<style>
#resultTable {
display: none;
}
#btnDiv {
text-align: center;
background-color: black;
border: 3px solid;
margin: 20px 0 20px 0;
padding: 20px 5px 20px 5px;
}
input {
margin: 0 3px 0 10px;
padding: 6px 14px 6px 14px;
background-color: #FFFFFF;
color: #757686;
border-radius: 5px;
font-size: 16px;
}
label {
color: yellow;
font-size: 22px;
font-weight: bold;
}
button {
padding: 6px 14px 6px 14px;
border-radius: 5px;
font-weight: bold;
background-color: #FFD011;
color: #757686;
font-size: 16px;
}
.green {
color: #32B964;
}
.lightBlue {
color: #BFDAF9;
}
.blue {
color: #0078E6;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
color: #757686;
}
thead {
background-color: #757686;
color: white;
}
/* change border color here */
td, th {
border: 1px solid #f2f2f2;
text-align: left;
padding: 8px;
}
/* Change color for every second row */
tr:nth-child(even) {
background-color: #f2f2f2;
}
h2 {
color: #4D4D87;
}
</style>
</head>
<body id="main">
<div id="btnDiv">
<input type="text" value="Tarantino" readonly>
<button id="goBtn">Go</button>
</div>
<div id="resultTable">
<table>
<thead><tr>
<th title="Field #1">title</th>
<th title="Field #2">year</th>
</tr></thead>
<tbody>
<tr>
<td class="blue">Pulp Fiction</td>
<td>1994</td>
</tr>
<tr>
<td class="blue">Django</td>
<td>2012</td>
</tr>
</tbody></table>
</div>
<div id="baseTable">
<table>
<thead><tr>
<th title="Field #1">title</th>
<th title="Field #2">year</th>
<th title="Field #3">director</th>
</tr></thead>
<tbody>
<tr>
<td class="blue">Rushmore</td>
<td>1998</td>
<td>Wes Anderson</td>
</tr>
<tr>
<td class="blue">Isle of Dogs</td>
<td>2018</td>
<td>Wes Anderson</td>
</tr>
<tr>
<td class="blue">Pulp Fiction</td>
<td>1994</td>
<td>Tarantino</td>
</tr>
<tr>
<td class="blue">The Shining</td>
<td>1980</td>
<td>Stanley Kubric</td>
</tr>
<tr>
<td class="blue">Django</td>
<td>2012</td>
<td>Tarantino</td>
</tr>
</tbody></table>
</div>
</body>
</html>
<script>document.getElementById("goBtn").addEventListener("click", function() {
let resultTable = document.getElementById("resultTable");
let baseTable = document.getElementById("baseTable");
baseTable.style.display = 'none';
resultTable.style.display = 'block';
});
</script>
</body>
</html>]]>