I'm trying to create an HTML table with six columns that will show/hide certain rows based upon whether the a checkbox corresponding to the class of the particular row is checked. However, all of the questions that I have seen that discuss this make the checkboxes part of the table. While this could work quite well in a different context, it looks god awful with the table that I am trying to make.
Full disclosure: I am a total noob that is self-taught in the very little HTML and jQuery/Javascript that I do know, so please bear with me as I try and explain my issue in what I am sure is a wordy and less than desirable fashion.
I recently completed a school project where I collected about 400 primary source documents related to the topic of my school project. Each document comes from either the Legislative, Judicial, or Executive Branch of Government. Each document also fits within 1 of 12 document types. Six document types are associated with the Legislative Branch. Two document types are associated with the Judicial Branch. Four document types are associated with the Executive Branch.
I am now trying to create a static website, one page of which will contain a "Master List," which will contain an HTML table with columns for the Date, Author, Name of the Document, Document Type, Link to an HTML Version of the Document, and a Link to the original PDF Version of the Document. I would like visitors to be able to use checkboxes to show/hide the documents based upon the Document Type. Most of the advice I have seen on this topic has the checkboxes as part of the table in a single column. Given my large number of Document Types, this left an awkwardly long list of 12 checkboxes at the top of the table.
I then decided that it would look better if the checkboxes were distributed between columns, but I didn't want them distributed between all six columns, because I wanted each Document Type to be listed under the corresponding Branch of Government from which it came. Since I have six total columns and there are three Branches of Government, I decided to try having the checkboxes split across three colspan="2" columns. This turned out okay, but still looks awkward.
Here is what I have done so far:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Master List</title>
<style>
table, th, td, tr {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 2px;
}
div {
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
width: 90%
}
</style>
</head>
<body>
<h1 style="text-align:center;">MASTER LIST</h1>
<table>
<thead>
<tr>
<td colspan="2"><b>Executive</b></td>
<td colspan="2"><b>Judiciary</b></td>
<td colspan="2"><b>Congress</b></td>
</tr>
<tr>
<td colspan="2">
<label>
<input type="checkbox" class="show" value="president" checked /> President
</label>
</td>
<td colspan="2">
<label>
<input type="checkbox" class="show" value="courtOpinions" checked /> Court Opinions
</label>
</td>
<td colspan="2">
<label>
<input type="checkbox" class="show" value="committeeReports" checked /> Committee Reports
</label>
</td>
</tr>
<tr>
<th>Date</th>
<th>Author</th>
<th>Document</th>
<th>Type</th>
<th>HTML</th>
<th>PDF</th>
</tr>
</thead>
<tbody>
<tr class="courtOpinions">
<td nowrap>1803-02-24</td>
<td>United States Supreme Court</td>
<td>Marbury v. Madison, 5 U.S. 137 (1803).</td>
<td>Court Opinion</td>
<td><a href="">HTML</a></td>
<td><a href="">PDF</a></td>
</tr>
<tr class="president">
<td nowrap>1954-05-07</td>
<td>Dwight D. Eisenhower</td>
<td>Letter from Dwight Eisenhower, President, United States, to Charles Erwin Wilson, Secretary of Defense (May 17, 1954).</td>
<td>President</td>
<td><a href="">HTML</a></td>
<td><a href="">PDF</a></td>
</tr>
<tr class="committeeReports">
<td nowrap>1947-01-06</td>
<td>Senate Judiciary Committee</td>
<td>S. Comm. on the Judiciary, 80th Cong., Mem. on Proceedings Involving Contempt of Congress and Its Committees (Comm. Print 1947).</td>
<td>Committee Report</td>
<td><a href="">HTML</a></td>
<td><a href="">PDF</a></td>
</tr>
</tbody>
</table>
</body>
<script>
$('thead input[type=checkbox]').change(function(){
var self = this;
$(self).closest('table').find('tbody tr').filter('.' + self.value).toggle(self.checked);
});
</script>
</html>
I have realized that the checkboxes would look better if they were not contained within the table. Thinking through this, I think it would be desirable to have the checkboxes were along the right side of the table and listed like this:
Executive
[] President
. . .
Legislative
[] Committee Reports
. . .
Judiciary
[] Court opinions
. . .
Ideally, it would be neat to have the checkboxes stay "static" (not sure if that is the right word) as in have it remain in the same place while the user scrolls down the Master List. However, this is not a dealbreaker and if I could figure out how to have the checkboxes outside of the table, that would be enough for me.
So does anyone know how I can accomplish this? I have both pasted my current code below as well as linked it to a Fiddle.
Thank you all!
Aucun commentaire:
Enregistrer un commentaire