ike Posted October 8 Share Posted October 8 I created a table with a header and table information. I'm looking for the ability to search for a table header and then display the header and the table information below it. Currently I can search for a header but can’t figure out how to get the header and table information to show. I can get the header to show, or I can get the table information from the table to show but I can’t get the header and table to show together. Here is my code. <style> *{ padding: 0px auto; margin: 0px auto; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 98%; font-size: 16px; padding: 12px 12px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } h2{ font-size: 16px; } div.container{ padding: 0px auto; margin: 0px auto; width: 100%; height: auto; text-align: center; bbackground-color: #f60; } .wrap { bborder: 1px solid #ccc; text-align: left; } .box { width: 45%; bbackground: #fff; display: inline-block; margin:0px; padding: 0px 60px 0px 0px; text-align: left; vertical-align: top; } .leftbox { width: 45%; bbackground: #fff; display: inline-block; margin:0px; padding: 0px 0px 0px 0px; text-align: left; vertical-align: top; float: left; } .rightbox { width: 45%; bbackground: #fff; display: inline-block; margin:0px; padding: 0px 0px 0px 0px; text-align: left; vertical-align: top; float: right; } #employees { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; } th { padding-top: 20px; padding-bottom: 20px; text-align: left; bbackground-color: #04AA6D; background-color: #ddd; color: white; border-right: none; font-size: 16px; font-weight: bold; } #employees td{ border: 1px solid #ddd; bborder-left: 1px solid #ddd; padding: 8px; text-align: left; font-size: 14px; } #employees th { bborder: 1px solid #ddd; bborder-left: 1px solid #ddd; padding: 8px; text-align: left; } #employees tr:nth-child(even){background-color: #fff;} #employees tr:nth-child(odd){background-color: #fff;} #employees tr:hover {background-color: #eee;} #employees p:hover {background-color: #fff;} #employees th { padding-top: 10px; padding-bottom: 10px; text-align: left; bbackground-color: #04AA6D; color: #404040; } #employees td1 { padding-top: 12px; padding-bottom: 120px; text-align: left; background-color: #fff; color: white; } @media screen and (max-width:1280px) { .box { width: 100%; bbackground: #fff; ddisplay: inline-block; margin: 0px; padding: 0px; text-align: left; } .leftbox, .rightbox{ width: 100%; padding: 0px 0px; margin: 0px 0px; clear: both; } } </style> <!-- body-content --> <div class="body-content"> <div class="text-box"> <h1>Employee & Branch Phone Directory</h1> <hr> <br> <div class="wrap" id="myTable"> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for an employee by first or last name or a branch by name.." title="Type in a name"> <div class="leftbox" > <table id="employees" border="0"> <tr> <th width="60%"><u>Accounts Payable</u></th> <th width="40%"></th> </tr> <tr> <td>Janet Smith</td> <td>127</td> </tr> <tr> <td> </td> <td> </td> </tr> </table> <table id="employees" border="0"> <tr> <th width="60%"><u>ACH</u></th> <th width="40%"></th> </tr> <tr> <td> Samatha Cook</td> <td>113</td> </tr> <tr> <td> Frank Wright</td> <td>102</td> </tr> <tr> <td>Crystal Bowmen</td> <td >203</td> </tr> <tr> <td>Robert Townsend</td> <td>305</td> </tr> <tr> <td>Bob Warren</td> <td>407</td> </tr> <tr> <td>Brynn Catlow</td> <td>400</td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </div> <script> function myFunction() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } </script> </div> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now