Help with tables

Help with tables
0

I’m trying to build two tables users can search and filter with but keep running issues with the second table.

Here is the full code, any help would be appreciated.

<style type="text/css"><!--
<!
.itstable2 thead td{
		background:-o-linear-gradient(bottom, #666666 5%, #0a0500 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #666666), color-stop(1, #0a0500) );
	background:-moz-linear-gradient( center top, #666666 5%, #0a0500 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#0a0500");	background: -o-linear-gradient(top,#666666,0a0500);

	background-color:#666666;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	
	color:#ffffff;
}

.itstable2 {<span id="CmCaReT"></span>
	margin:0px;margin-top:5px;padding:0px;
	width:100%;
	border:1px solid #000000;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.itstable2 table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.itstable2 tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.itstable2 table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.itstable2 table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.itstable2 tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}
.itstable2 tr:nth-child(odd){ background-color:#efefef; }
.itstable2 tr:nth-child(even)    { background-color:#ffffff; }.itstable2 td{
	vertical-align:middle;
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;<span id="CmCaReT"></span>
	padding:4px;
	color:#000000;
}.itstable2 tr:last-child td{
	border-width:0px 1px 0px 0px;
}.itstable2 tr td:last-child{
	border-width:0px 0px 1px 0px;
}.itstable2 tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.itstable2 tr:first-child td{
	border:0px solid #000000;
	border-width:0px 0px 1px 1px;
}
.itstable2 tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.itstable2 tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}
--></style>
<h3 id="howto001" class="scroll-adjust" data-nav="Medium/High Impact Changes" data-nav-show="true">Medium / High Impact Changes</h3>
<p>Click here to view all, including key points and images.</p>
<div id="mylist_sorter"><input class="search" style="margin-right: 5px;" size="20" type="text" placeholder="Search" /> <button class="sort" data-sort="mylist_col01">Sort by Module</button> <button class="sort" data-sort="mylist_col04">Sort by Role</button> <button class="sort" data-sort="mylist_col05">Sort by Group</button>
<table class="itstable2" width="100%">
<thead>
<tr>
<td align="center" bgcolor="#d5d8dc"><strong>Epic Module</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong>Summary of Changes</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong>Related Knowledge Article(s)</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong style="background-color: #d5d8dc;">Impacted Role(s)</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong>Impacted Group(s)</strong></td>
<td align="center" bgcolor="#d5d8dc">
<p><strong>Activation Date</strong></p>
</td>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="mylist_col01">Transfer Center</td>
<td class="mylist_col02">The Transfer Center department will use the Epic Transfer Center module to document all transfer requests for both Stanford Hospital and Valley Care.</td>
<td class="mylist_col03">
<p><a title="Transfer Center Overview (SHC/VC)" href="https://stanfordhc.service-now.com/edu/edu_view.do?sysparm_article=KB0366150" target="_blank">Transfer Center Overview (SHC/VC)</a><br />(New Article)</p>
</td>
<td class="mylist_col04">Nurse, Unit Clerk</td>
<td class="mylist_col05">ED, HOD, Inpatient, Peri-Op,&nbsp; Rad</td>
<td class="mylist_col06">June 3</td>
</tr>
<tr>
<td class="mylist_col01">Haiku</td>
<td class="mylist_col02">A new process has been implemented for when an outside facility requests patient transfer to Stanford or ValleyCare ED.</td>
<td class="mylist_col03"><a title="Document Expected Patient Arrival to the Emergency Department (SHC/VC)" href="https://stanfordhc.service-now.com/edu/edu_view.do?sysparm_article=KB0058994" target="_blank">Document Expected Patient Arrival to the Emergency Department (SHC/VC)</a><br /> (Refer to Step One for Change)<br /><br /> <a title="Document an Expected Note on Expected ED Encounter (SHC/VC)" href="https://stanfordhc.service-now.com/edu/edu_view.do?sysparm_article=KB0373352" target="_blank">Document an Expected Note on Expected ED Encounter (SHC/VC)</a><br /> (Refer to Step&nbsp;Three for Change)</td>
<td class="mylist_col04">Nurse</td>
<td class="mylist_col05">ED</td>
<td class="mylist_col06">June 10</td>
</tr>
</tbody>
</table>
</div>
<div class="backtotop" align="right"><a href="#top">Back to Top</a></div>
<p>&nbsp;</p>
<h3 id="howto002" class="scroll-adjust" data-nav="Low Impact Changes" data-nav-show="true">Low Impact Changes</h3>
<p>Click here to view all, including key points and images.</p>
<div id="mylist_sorter"><input class="search" style="margin-right: 5px;" size="20" type="text" placeholder="Search" /> <button class="sort" data-sort="mylist_col01">Sort by Module</button> <button class="sort" data-sort="mylist_col03">Sort by Date</button> <button class="sort" data-sort="mylist_col04">Sort by Group</button> <button class="sort" data-sort="mylist_col05">Sort by Role</button>
<table class="itstable2" width="100%">
<thead>
<tr>
<td align="center" bgcolor="#d5d8dc"><strong>Epic Module</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong>Summary of Changes</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong>Activation Date</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong>Impacted Group(s)</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong>Impacted Role(s)</strong></td>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="mylist_co101">King's Stool</td>
<td class="mylist_co102">King's Stool now has a new chart to document stool consistency. The Consistency selections allow for a broader range of row choices in the flowchart.</td>
<td class="mylist_co103">June 15</td>
<td class="mylist_co104">ED, Inpatient, OR Procedure, Peri-Op</td>
<td class="mylist_co105">Nurse</td>
</tr>
<tr>
<td class="mylist_co101">Physical Therapist Flowsheet and Navigator</td>
<td class="mylist_co102">A new Vestibular Exam is now available in the Physical Therapist Flowsheet and Navigator. This standardized documentation process will allow for easy documentation and comparison of trends.</td>
<td class="mylist_co103">June 12</td>
<td class="mylist_co104">HOD</td>
<td class="mylist_co105">Therapists PT OT SLP ST</td>
</tr>
</tbody>
</table>
</div>
<div class="backtotop" align="right"><a href="#top">Back to Top</a></div>
<p>&nbsp;</p>

What are the issues? What are you trying to accomplish vs what is happening instead?

I’d like for users to search within the table or click on a button to filter.

The first table works but the second doesn’t work. Can’t filter or search.

I can’t search or filter anything with the first table either. There is no JavaScript code which provides that functionality.