Table header stay fixed when search element inside table - javascript

I need some help! I use flask to create a website with data table, I tried many different methods but I don't manage to fix the table head and when I search the table head collapsed also. How can I solve it in my code please?
my table
HTML:
<div>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Country">
</div>
<table id="myTable">
<thead>
<tr>
<th>Country</th>
<th>Total Cases</th>
<th>Today Cases</th>
<th>Total Deaths</td>
<th>Today Deaths</th>
<td>Total Recovered</td>
<td>Active</td>
<td>Critical</td>
<td>Cases Per One Million</td>
<td>Deaths Per One Million</td>
<td>Total Tests</td>
<td>Tests Per One Million</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
CSS:
#myTable {
border-collapse: collapse;
/* Collapse borders */
width: 100%;
/* Full-width */
border: 1px solid #ddd;
/* Add a grey border */
font-size: 18px;
/* Increase font-size */
}
#myTable th,
#myTable td {
text-align: left;
/* Left-align text */
padding: 12px;
/* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
JavaScript:
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});

Related

Show html table content in separate boxes

I have a simple html page with a html table. I have complied the codes to show real time search result in the table format. I am just wondering if it is possible to show the table data in separate boxes? Like forms? I have 11 columns in My html table and few of them has very long data so text wrapping looks ugly.
Please guide me how can the data be filtered and displayed in scrollable boxes instead of normal table.
here is my code.
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";
}
}
}
}
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";
}
}
}
}
* {
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;
}
<!DOCTYPE html>
<html>
<head>
</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 Click Here or send email to pratik.kumar#company.com</font>
</body>
</html>
Writing as an answer as not allowed to comment yet. You could set the following styles:
tr,td {
overflow: auto;
}
This will allow scrolling in cells of table when texts overflow or are more than specified size of boxes.
More on overflow here: https://www.w3schools.com/cssref/pr_pos_overflow.asp
Yes, table cells can contain another elements, and you can insert div with limited dimensions into and set overflows for scrolling. For example:
<table>
<tr>
<td>One cell</td>
<td>second cell
<div style="width: 100px; height: 100px; overflow: auto">
very long text goex here and scroll bar will appear
very long text goex here and scroll bar will appear
very long text goex here and scroll bar will appearvery long text goex here and scroll bar will appear
very long text goex here and scroll bar will appear
</div>
</td>
<td>Third cell</td>
</tr>
</table>

jQuery table body with custom scrollbar

I am using the jquery library to create a custom scrollbar - https://codepen.io/dragospaulpop/pen/asBcI
I created a simply example but the critical needed is to make the table fill to the rest of the page (without activating the standard browser scrollbar).
My code is:
<head>
<meta charset="UTF-8">
<title>CSS Only Fixed Table Headers</title>
<link rel='stylesheet' href='https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.concat.min.js'></script>
</head>
<body>
<div style="width:100%;height:300px;background:red"></div>
<table class="fixed_headers">
<thead>
<tr>
<th>Name</th><th>Color</th><th>Description</th>
</tr>
</thead>
<tbody id="myBody">
</tbody>
</table>
<script>
$(window).load(function(){
$("#myBody").append(" <tr> <td>Apple</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Pear</td><td>Green</td><td>These are green.</td> </tr> <tr> <td>Grape</td><td>Purple / Green</td><td>These are purple and green.</td> </tr> <tr> <td>Orange</td><td>Orange</td><td>These are orange.</td> </tr> <tr> <td>Banana</td><td>Yellow</td><td>These are yellow.</td> </tr> <tr> <td>Kiwi</td><td>Green</td><td>These are green.</td> </tr> <tr> <td>Plum</td><td>Purple</td><td>These are Purple</td> </tr> <tr> <td>Watermelon</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Tomato</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Cherry</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Cantelope</td><td>Orange</td><td>These are orange inside.</td> </tr> <tr> <td>Honeydew</td><td>Green</td><td>These are green inside.</td> </tr> <tr> <td>Papaya</td><td>Green</td><td>These are green.</td></tr><tr><td>Raspberry</td><td>Red</td><td>These are red.</td></tr><tr><td>Blueberry</td><td>Blue</td><td>These are blue.</td></tr><tr><td>Mango</td><td>Orange</td><td>These are orange.</td></tr><tr><td>Passion Fruit</td><td>Green</td><td>These are green.</td></tr>");
$("tbody").mCustomScrollbar({
theme:"light-3",
scrollButtons:{
enable:false
},
mouseWheel:{ preventDefault: true },
scrollbarPosition: 'inside',
autoExpandScrollbar:true,
theme: 'dark'
});
});
</script>
<style>
tbody {
height: 150px;
overflow: hidden;
/*replace with auto to use default scroll*/
/*overflow: auto;*/
}
.fixed_headers {
table-layout: fixed;
border-collapse: collapse;
display: block;
width: 100%;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
box-sizing: border-box;
display: inline-block;
width: 33.33%;
}
.fixed_headers tr {
display: block;
width: 100%;
}
.fixed_headers thead {
background-color: #333;
color: #FDFDFD;
display: block;
width: 100%;
}
.fixed_headers tbody {
display: block;
width: 100%;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
</style>
</body>
I want to make the table's height: page_height-red_div_height (the size of page could be changed so it could be as percent). So the perfect solution is that red_div has always the same height but the height of the table is not const (could change by the windows size).
I tried to change the css by removing height: 150px; from the tbody and put there height: 100%; but the result was wrong - the standard browser scrollbar was activated instead of the custom scrollbar. Then I tried to change css of .fixed_headers tbody but it does not work as well.
How is it possible to solve this issue?
Is there any alternative jQuery plugin that allows to:
-scroll only tbody
-add tbody content dynamically
-declare elements (td, tr, tbody) sizes as percents
-auto scroll programaticaly (to initial position)

How do I make a <tr> behave as a fixed topbar?

I have a table that displays some information with the first row being headers for the respective information.
On scrolling, let's say 100px from the top of the page, i'd like the header row to stay fixed at the top of the visible screen so that as you scroll down the table you can still see the headers.
I've tried:
$(window).scroll(function(){
if( $(window).pageYOffset > 100 ){
$("#resultTableHeader").css('position', 'fixed');
$("#resultTableHeader").css('top', '70px');
$("#resultTableHeader").css('z-index', '2');
}
});
but it doesn't seem to do anything.
Even if it did, however, make the header row fixed, If one column expanded the header row column, then pulling it out of the flow would make that column not be expanded anymore.
Is there a way to do this?
EDIT (more info):
I can guarantee that the whole page will be just the table so staying at the top of the screen for any Y co-ord past 100px would be acceptable.
When I say fixed I mean that the header row will stay pinned to the top of the VISIBLE window as you scroll down along the table.
Fixed table header with pure html and css
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>
This is a common problem when using table elements. Most libraries use two tables to fix this. The first table only contains the th elements and the second table has all tr elements.
Check jqgrid for example.

Responsive table with vertical and horizontal headers [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have the following table (jsFiddle):
<table>
<tr>
<th></th>
<th scope="col">BMW</th>
<th scope="col">Audi</th>
<th scope="col">Mercedes</th>
</tr>
<tr>
<th scope="row">GPS</th>
<td>1200</td>
<td>1000</td>
<td>1400</td>
</tr>
<tr>
<th scope="row">Bluetooth</th>
<td>700</td>
<td>750</td>
<td>680</td>
</tr>
<tr>
<th scope="row">Sensors</th>
<td>1230</td>
<td>1400</td>
<td>1100</td>
</tr>
</table>
How do I make it responsive, so that in mobile devices the table will look like this:
<table>
<tr>
<th></th>
<th scope="col">BMW</th>
</tr>
<tr>
<th scope="row">GPS</th>
<td>1200</td>
</tr>
<tr>
<th scope="row">Bluetooth</th>
<td>700</td>
</tr>
<tr>
<th scope="row">Sensors</th>
<td>1230</td>
</tr>
</table>
Is it possible to do this just in CSS? I'm guessing not since I will need to duplicate the vertical headers
Changing the point of view and starting with three tables you can achieve the opposite effect, merging the columns when a larger viewport is available like so:
http://codepen.io/anon/pen/qEwodb
CSS
table {
border-collapse: collapse;
}
td, th {
border: 1px #ddd solid;
}
table {
margin: 20px 0;
}
td, th {
padding: 10px;
}
#media all and (min-width: 640px) {
table {
float: left;
}
table ~ table td,
table ~ table th { border-left: 0; }
table ~ table tr:first-child th:first-child { display: none; }
table ~ table tr:not(:first-child) th { display: none; }
}
With this approach the information redundancy has been kept as low as possible, since the actual data is not duplicated.
Its Not As you wished but check this out.IT's a responsive table.
HTML
<table>
<thead>
<tr>
<th></th>
<th scope="col">BMW</th>
<th scope="col">Audi</th>
<th scope="col">Mercedes</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">GPS</th>
<td>1200</td>
<td>1000</td>
<td>1400</td>
</tr>
<tr>
<th scope="row">Bluetooth</th>
<td>700</td>
<td>750</td>
<td>680</td>
</tr>
<tr>
<th scope="row">Sensors</th>
<td>1230</td>
<td>1400</td>
<td>1100</td>
</tr>
<tbody>
</table>
CSS
table, td, th {
border: 1px solid black;
border-collapse: collapse;
padding: 0.5em;
}
#media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "BMW"; }
td:nth-of-type(2):before { content: "Audi"; }
td:nth-of-type(3):before { content: "Mercedes"; }
}
DEMO

how to freeze table header using javascript

I have table with 200 rows. The first row has headings(th tag). While i am scrolling down the heading is to be fixed and visible to all rows. Any help?
Thank You
Easiest answer, check this out -> http://www.imaputz.com/cssStuff/bigFourVersion.html
One caveat: Does not work for IE 7-9 (Does work for 6 and 10). If you need a solution for 7-9, try jQuery Scrollable Table Plugin. You can even set it up to only use the JS for IE versions 7-9 by placing the javascript call for it inside IE if comments. Then you'd know anyone using a better browser would be using pure CSS (faster) and you'd have a solution for those using crap ... i mean IE 7,8, or 9.
It basically has to do with the CSS. One key is setting table-body to display: block. Another issue is going to be in dealing with fixed widths. Just check it out. It's REALLY easy to copy that example.
Really not much more I can say! This example is PURE CSS, no JS!
jsFiddle
CSS
/* define height and width of scrollable area. Add 16px to width for scrollbar */
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 756px
}
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
overflow: hidden;
width: 756px
}
/* define width of table. IE browsers only */
div.tableContainer table {
float: left;
width: 740px
}
/* define width of table. Add 16px to width for scrollbar. */
/* All other non-IE browsers. */
html>body div.tableContainer table {
width: 756px
}
/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
position: relative
}
/* set THEAD element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
display: block
}
/* make the TH elements pretty */
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
}
/* make the A elements pretty. makes for nice clickable headers */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%
}
/* make the A elements pretty. makes for nice clickable headers */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%
}
/* define the table content to be scrollable */
/* set TBODY element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto */
html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%
}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
html>body thead.fixedHeader th {
width: 200px
}
html>body thead.fixedHeader th + th {
width: 240px
}
html>body thead.fixedHeader th + th + th {
width: 316px
}
/* define width of TD elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
html>body tbody.scrollContent td {
width: 200px
}
html>body tbody.scrollContent td + td {
width: 240px
}
html>body tbody.scrollContent td + td + td {
width: 300px
}
HTML
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
...
...
...
<tr>
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>
</div>

Categories