Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- * {
- box-sizing: border-box;
- }
- #myTable tbody {
- height: 600px;
- display: inline-block;
- width: 100%;
- overflow: auto;
- }
- #myInput1 {
- background-image: url("res/searchicon.png");
- background-position: 10px 10px;
- background-repeat: no-repeat;
- width: 26%;
- font-size: 16px;
- padding: 12px 20px 12px 40px;
- border: 1px solid #ddd;
- margin-bottom: 12px;
- }
- #myInput2 {
- background-image: url("res/searchicon.png");
- background-position: 10px 10px;
- background-repeat: no-repeat;
- width: 26%;
- font-size: 16px;
- padding: 12px 20px 12px 40px;
- border: 1px solid #ddd;
- margin-bottom: 12px;
- }
- #myTable {
- border-collapse: collapse;
- width: 100%;
- border: 1px solid #ddd;
- font: 15px arial, sans-serif;
- }
- tr:nth-child(even) {
- background-color: #eff1f4;
- }
- #myTable th, #myTable td {
- table-layout: fixed;
- text-align: left;
- padding: 10px;
- width: 100%;
- }
- #myTable tr {
- border-bottom: 1px solid #ddd;
- }
- #myTable tr.header, #myTable tr:hover {
- background-color: #DEC4BC;
- }
- img {
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
- </style>
- </head>
- <body>
- <img src="res/eGo.png" style="width:250px;height:150px;">
- <h2><font face="Arial" color="#c11919">eGO Web</font></h2>
- <input type="text" id="myInput1" onkeyup="myFunction1()" placeholder="Search for customer names" title="Type in a customer name">
- <input type="text" id="myInput2" onkeyup="myFunction2()" placeholder="Search for Customer Number" title="Type in a Customer Number">
- <br>
- <font size="2"face="Arial" color="#c11919">last updated on - July 2019</font>
- <br>
- <br>
- <table id="myTable" style="display:visible;">
- <tr class="header">
- <th style="width:10%; ">Customer Name</th>
- <th style="width:10%;">Account Number</th>
- <th style="width:10%;">Collector Name</th>
- <th style="width:10%;">Statement Email</th>
- <th style="width:10%;">Customer Contacts</th>
- <th style="width:10%;">Internal Contacts</th>
- <th style="width:10%;">3rd Party Payments</th>
- <th style="width:10%;">Remarks/ Customer Profile</th>
- <th style="width:10%;">Historical Activities</th>
- <th style="width:10%;">Portal/ Invoicing Method</th>
- <th style="width:10%;">Statement Required</th>
- </tr>
- <--! Here is table data -->
- </table>
- <br>
- <font size="1"face="Arial" color="#c11919">To report issues <a href="mailto:pratik.kumar@company.com?Subject=Issue%20in%20Collector%20lookup%20tool%20" target="_top">Click Here</a> or send email to pratik.kumar@company.com</font>
- <script>
- function myFunction1() {
- var input, filter, table, tr, td, i;
- input = document.getElementById("myInput1");
- 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) {
- if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
- tr[i].style.display = "";
- } else {
- tr[i].style.display = "none";
- }
- }
- }
- }
- </script>
- <script>
- function myFunction2() {
- var input, filter, table, tr, td, i;
- input = document.getElementById("myInput2");
- filter = input.value.toUpperCase();
- table = document.getElementById("myTable");
- tr = table.getElementsByTagName("tr");
- for (i = 0; i < tr.length; i++) {
- td = tr[i].getElementsByTagName("td")[1];
- if (td) {
- if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
- tr[i].style.display = "";
- } else {
- tr[i].style.display = "none";
- }
- }
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement