Sticky header and footer scrollable main area - javascript

I want my page to have a fixed header and footer, which must stay on screen all the time. The lateral panel is on an aside, and the main content inside a section.
Using JavaScript, I managed to keep the aside occupying all the remaining height (window.height - header.height - footer.height). But it only works when the section is not too high. When I resize the window, I can see that the footer is disappearing under the bottom edge of the window, giving room to the section.
I tried many different combinations of overflow-y (inside section, on the div inside it, on both), to no avail. How can I solve it?
I made a jsfiddle example.
function resize() {
var hPage = window.innerHeight;
var hHead = document.getElementById('header').offsetHeight;
var hFoot = document.getElementById('footer').offsetHeight;
document.getElementById('spn').innerHTML = 'Page: ' + hPage + '<BR>Head: ' + hHead + '<BR>Foot: ' + hFoot;
document.getElementById('aside').style.height = (hPage - hHead - hFoot) + 'px';
}
html,
body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
}
header {
background-color: green;
color: white;
text-align: center;
font-weight: bold;
font-size: 30px;
}
section {
float: right;
width: 80%;
overflow-x: auto;
overflow-y: auto;
}
section div {
padding: 10px;
overflow-x: auto;
overflow-y: auto;
}
aside {
float: left;
background-color: lightgreen;
width: 20%;
}
aside p {
margin-left: 20px;
}
footer {
background-color: green;
color: white;
text-align: center;
clear: both;
}
table {
border-collapse: collapse;
}
th {
border: 1px solid black;
text-align: center;
font-weight: bold;
}
td {
border: 1px solid black;
text-align: center;
}
<body onload='resize()' onresize='resize()'>
<header id='header'>Test 0.1</header>
<aside id='aside'>
<p>Menu 1</p>
<p>Menu 2</p>
<p>Menu 3</p>
<p>Menu 4</p>
<p><span id='spn'>n</span>
</p>
</aside>
<section>
<div id='divMain'>
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</section>
<footer id='footer'>Address,
<br>phone,
<br>etc.
<br>
<br>Address,
<br>phone,
<br>etc.</footer>
</body>


Try the flexbox approach, no javascript is needed. Added a <main> element wraps the <aside> and <section>.
jsFiddle
html,
body {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
}
header {
background-color: green;
color: white;
text-align: center;
font-weight: bold;
font-size: 30px;
}
main {
flex: 1;
display: flex;
min-height: 0;
}
aside {
background-color: lightgreen;
width: 20%;
overflow: auto;
}
aside p {
margin-left: 20px;
}
section {
width: 80%;
overflow: auto;
}
section div {
padding: 10px;
}
footer {
background-color: green;
color: white;
text-align: center;
}
table {
border-collapse: collapse;
}
th {
border: 1px solid black;
text-align: center;
font-weight: bold;
}
td {
border: 1px solid black;
text-align: center;
}
<header id='header'>
Test 0.1
</header>
<main>
<aside id='aside'>
<p>Menu 1</p>
<p>Menu 2</p>
<p>Menu 3</p>
<p>Menu 4</p>
<p><span id='spn'>n</span>
</p>
</aside>
<section>
<div id='divMain'>
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</section>
</main>
<footer id='footer'>
Address,
<br>phone,
<br>etc.
<br>
<br>Address,
<br>phone,
<br>etc.
<br>
</footer>


If you want to make the header and footer to have a fixed position then you should use position:fixed attribute.
Here is the fiddle


You can apply position:fixed to the footer & also to show the table if it's height overflows , you need to add scroll option.
Here is a css which may help you
#footer{
position:fixed;
bottom:0;
width:100%
}
#divMain{
overflow-y:auto; // scrollbar will only appear when require
height:500px; // you can adjust this height
}
DEMO

Related

Why doesn't my click handler show the correct table element?

I have JavaScript code which on button click shows its table. I have 4 buttons (and tables, obviously). Probably there will be more, so making function to each one of them will be bad idea. That being said, I made this code below to slightly minimize the amount of code. But, it doesn't work, and I don't quite understand why.
document.addEventListener('DOMContentLoaded', function() {
const tab1 = document.getElementById('tab1');
const tab2 = document.getElementById('tab2');
const tab3 = document.getElementById('tab3');
const tab4 = document.getElementById('tab4');
const currentTable = ".table";
const tables = Array.from(document.querySelectorAll(currentTable))
const table1 = document.querySelector('.table1');
const table2 = document.querySelector('.table2');
const table3 = document.querySelector('.table3');
const table4 = document.querySelector('.table4');
//this doesnt work
function showTable(e) {
const target = e.target;
if (!target || !target.matches(currentTable)) {
return;
}
tables.forEach(elem => elem.classList.remove('active'));
tables.forEach(elem => elem.classList.remove('op'));
e.target.classList.add('active');
setTimeout(function() {
e.target.classList.add('op');
}, 20);
};
tab1.addEventListener('click', showTable(table1));
tab2.addEventListener('click', showTable(table2));
tab3.addEventListener('click', showTable(table3));
tab4.addEventListener('click', showTable(table4));
});
//this one for buttons
document.addEventListener('DOMContentLoaded', function() {
const selector = '.table_option';
const elems = Array.from(document.querySelectorAll(selector));
const navigation = document.querySelector('.table-nav');
function makeActive(e) {
const target = e.target;
if (!target || !target.matches(selector)) {
return;
}
elems.forEach(elem => elem.classList.remove('active'));
e.target.classList.add('active');
};
navigation.addEventListener('click', makeActive);
});
.table_container {
display: flex;
width: 100%;
}
.table_content-left {
width: 30%;
margin-top: 50px;
}
.table_content-left .table_option {
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.table_content-left .table-nav li:not(:last-child) {
margin-bottom: 10px;
}
.table_content-left .table_option.active {
color: #eb5e28;
border-left: 2px solid #252422;
padding: 10px 15px;
transition: all 0.8s;
}
.table_content-right {
width: 70%;
}
.table {
display: none;
opacity: 0;
transition: opacity 900ms;
}
.op {
opacity: 1;
}
.table_title {
font-size: 24px;
font-weight: 700;
}
.table_content table {
border-collapse: collapse;
}
.table_content td,
.table_content th {
text-align: left;
padding: 8px;
width: 100%;
font-weight: 600;
}
.table_content td {
background-color: #ccc5b9;
}
.table_content th:first-child {
padding: 8px 0px;
}
.table_content td:nth-child(2n+1) {
background-color: #403d39;
color: #fff;
}
.table_content tr:nth-child(even) {
background-color: #ccc5b9;
color: #fff;
}
.table_content tr:nth-child(even) td:nth-child(1n+1) {
background-color: #403d39;
}
.table_content tr:nth-child(even) td:nth-child(2n+1) {
background-color: #ccc5b9;
color: #252422;
}
.active {
display: block;
}
<div class="table_container ">
<div class="table_content-left">
<ul role="list" class="table-nav">
<li><a class="table_option active" id="tab1">button1</a></li>
<li><a class="table_option" id="tab2">button2</a></li>
<li><a class="table_option" id="tab3">button3</a></li>
<li><a class="table_option" id="tab4">button4</a></li>
</ul>
</div>
<div class="table_content-right">
<div class="table table1 active op">
<div class="table_title">1</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table2 table">
<div class="table_title">2</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table3 table">
<div class="table_title">3</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table4 table">
<div class="table_title">4</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
</div>
</div>
Where am I wrong? Can someone point me to the problem I am facing?

I like to take a simple index-based approach to things like this. If that doesn't suit, you could add indices to the tables using data attributes which correspond to tab index.
Some other tips...
You were creating event listeners in every call of showTable(). That would result in a pile of event handlers you don't want.
You were using a rather roundabout way to collect elements (with Array.from(). That's not needed.
Multiple classes can be added and removed as a list.
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.table_option');
const tables = document.querySelectorAll('.table');
tabs.forEach(tab => {
tab.addEventListener('click', e => {
const tabEl = e.currentTarget.parentNode;
const tabIndex = [...tabEl.parentNode.children].indexOf(tabEl);
showTable(tabIndex);
});
});
const showTable = index => {
tables.forEach(elem => elem.classList.remove('active', 'op'));
tables[index].classList.add('active');
setTimeout(() => {
tables[index].classList.add('op');
}, 20);
tabs.forEach(elem => elem.classList.remove('active', 'op'));
tabs[index].classList.add('active');
}
});
.table_container {
display: flex;
width: 100%;
}
.table_content-left {
width: 30%;
margin-top: 50px;
}
.table_content-left .table_option {
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.table_content-left .table-nav li:not(:last-child) {
margin-bottom: 10px;
}
.table_content-left .table_option.active {
color: #eb5e28;
border-left: 2px solid #252422;
padding: 10px 15px;
transition: all 0.8s;
}
.table_content-right {
width: 70%;
}
.table {
display: none;
opacity: 0;
transition: opacity 900ms;
}
.op {
opacity: 1;
}
.table_title {
font-size: 24px;
font-weight: 700;
}
.table_content table {
border-collapse: collapse;
}
.table_content td,
.table_content th {
text-align: left;
padding: 8px;
width: 100%;
font-weight: 600;
}
.table_content td {
background-color: #ccc5b9;
}
.table_content th:first-child {
padding: 8px 0px;
}
.table_content td:nth-child(2n+1) {
background-color: #403d39;
color: #fff;
}
.table_content tr:nth-child(even) {
background-color: #ccc5b9;
color: #fff;
}
.table_content tr:nth-child(even) td:nth-child(1n+1) {
background-color: #403d39;
}
.table_content tr:nth-child(even) td:nth-child(2n+1) {
background-color: #ccc5b9;
color: #252422;
}
.active {
display: block;
}
<div class="table_container ">
<div class="table_content-left">
<ul role="list" class="table-nav">
<li><a class="table_option active" id="tab1">button1</a></li>
<li><a class="table_option" id="tab2">button2</a></li>
<li><a class="table_option" id="tab3">button3</a></li>
<li><a class="table_option" id="tab4">button4</a></li>
</ul>
</div>
<div class="table_content-right">
<div class="table table1 active op">
<div class="table_title">1</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table2 table">
<div class="table_title">2</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table3 table">
<div class="table_title">3</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
<div class="table4 table">
<div class="table_title">4</div>
<table class="table_content" cellspacing="0">
<tr>
<th>Lorem</th>
<th>5</th>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
<tr>
<td>Lorem</td>
<td>5</td>
</tr>
</table>
</div>
</div>
</div>

Freeze first row and first column of table

I am trying to freeze/lock the first row and the first column of a table.
I have tried giving thead position: absolute; or position: fixed; but it looks strange.
I have followed some answers but I am still confused how to make it.
My HTML / CSS Code :
th {
font-size: 80%;
text-align: center;
}
td {
font-size : 65%;
white-space: pre;
text-align: center;
}
.inner {
overflow-x: scroll;
overflow-y: scroll;
width: 300px;
height: 100px;
}
input {
font-size : 65%;
}
<body>
<div class="inner">
<form method="POST" action="dashboard">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Tanggal</th>
<th>Judul Pekerjaan</th>
<th>Deskripsi</th>
<th>Level</th>
<th>Category</th>
<th>Severity</th>
</tr>
</thead>
</form>
<tbody>
<tr>
<td>1</td>
<td>1 May 2017</td>
<td>Satu</td>
<td>Satu</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
</tbody>
</table>
</div>
</body>

Freeze First Row
Freezing the first row can be done with CSS by setting the table body to overflow: auto, and giving a fixed width to the table cells. (See example 1)
Freeze First Row & First Column
However, to get this behavior for both first row and first column, you need to separate the first row, first column, and first cell from the table, and then continuously set the position of these elements based on the scrolled position of the table body, upon a scroll event. (See example 2)
Example 1: (Freeze first row only)
table thead tr {
display: block;
}
table th, table td {
width: 80px;
}
table tbody {
display: block;
height: 90px;
overflow: auto;
}
th {
text-align: center;
}
td {
text-align: center;
white-space: pre;
}
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Tanggal</th>
<th>Judul Pekerjaan</th>
<th>Deskripsi</th>
<th>Level</th>
<th>Category</th>
<th>Severity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1 May 2017</td>
<td>Satu</td>
<td>Satu</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
</tbody>
</table>
Example 2: (Freeze first row and first column)
$(document).ready(function() {
$('tbody').scroll(function(e) {
$('thead').css("left", -$("tbody").scrollLeft());
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()-5);
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()-5);
});
});
body {
margin: 0;
}
th, td {
text-align: center;
background-color: white
}
table {
position: relative;
width: 400px;
overflow: hidden;
}
thead {
position: relative;
display: block;
width: 400px;
overflow: visible;
}
thead th {
min-width: 80px;
height: 40px;
}
thead th:nth-child(1) {
position: relative;
display: block;
height: 40px;
padding-top: 20px;
}
tbody {
position: relative;
display: block;
width: 400px;
height: 90px;
overflow: scroll;
}
tbody td {
min-width: 80px;
}
tbody tr td:nth-child(1) {
position: relative;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Tanggal</th>
<th>Judul Pekerjaan</th>
<th>Deskripsi</th>
<th>Level</th>
<th>Category</th>
<th>Severity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1 May 2017</td>
<td>Satu</td>
<td>Satu</td>
<td>5</td>
<td>Lorem</td>
<td>Ipsum</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
</tbody>
</table>

If anyone struggles with such problem here is a solution for modern browsers without using jQuery or even JS - just pure HTML and CSS.
The trick is to set table to relative position and first row and/or column cells to sticky position. I added explicitly background color and z-index values to have this overlapping feeling.
.wrapper {
overflow: auto;
height: 100px;
width: 200px;
}
table {
position: relative;
border-collapse: separate;
border-spacing: 0;
}
table th,
table td {
width: 50px;
padding: 5px;
background-color: white;
}
table tbody {
height: 90px;
}
table th {
text-align: center;
position: sticky;
top: 0;
z-index: 2;
}
table th:nth-child(1) {
left: 0;
z-index: 3;
}
table td {
text-align: center;
white-space: pre;
}
table tbody tr td:nth-child(1) {
position: sticky;
left: 0;
z-index: 1;
}
<div class="wrapper">
<table class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Country</th>
<th>Hobbies</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
<tr>
<td>2</td>
<td>Ann</td>
<td>25</td>
<td>Great Britain</td>
</tr>
<tr>
<td>3</td>
<td>Alexander</td>
<td>41</td>
<td>Spain</td>
</tr>
<tr>
<td>4</td>
<td>Wasilij</td>
<td>63</td>
<td>Ukraine</td>
</tr>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
</tbody>
</table>
</div>

I resoved this issue from myself with my colleague together yesterday. The adapted CSS is:
.pcvBody {
overflow-x: auto;
width: calc(100vw - 110px);
}
/* CSS START for freezing table column*/
#prodTable {
position: relative;
overflow: hidden;
}
#prodTable thead {
position: relative;
display: block;
overflow: visible;
}
#prodTable thead th {
min-width: 150px;
width: 1000px;
}
#prodTable thead th:nth-child(1), #prodTable thead th:nth-child(2) {
position: relative;
/*display: block;*/
max-width: 150px;
width: 50px;
border-left: 1px solid #ededed;
}
#prodTable tbody {
position: relative;
display: block;
}
#prodTable tbody td {
min-width: 150px;
width: 1000px;
}
#prodTable tbody input {
max-width: 120px;
}
#prodTable tbody tr td:nth-child(1), #prodTable tbody tr td:nth-child(2) {
position: relative;
/*display: block;*/
background-color: white;
min-height: 20px;
max-width: 150px;
width: 50px;
border-left: 1px solid #ededed;
}
/* CSS END for freezing table column*/
And the adjusted scroll event is:
$('#pcvBody').scroll(function(e) {
var scrollLeft = $("#pcvBody").scrollLeft();
//$('#prodTable thead').css("left", -tbodyScrollLeft);
//$('#prodTable thead th:nth-child(1)').css("left", tbodyScrollLeft - 5);
//$('#prodTable tbody td:nth-child(1)').css("left", tbodyScrollLeft - 5);
$('#prodTable thead th:nth-child(1)').css("left", scrollLeft);
$('#prodTable tbody td:nth-child(1)').css("left", scrollLeft);
$('#prodTable thead th:nth-child(2)').css("left", scrollLeft);
$('#prodTable tbody td:nth-child(2)').css("left", scrollLeft);
});
And in addition, I added a 'div' to wrap the table.

How to get the value of clicked <td> inside an input field in jquery?

$(document).ready(function() {
$("td").on("click", function() {
var tdval, inputval, editdiv = "";
editdiv = $('<div class="editdiv"><input type="text" class="input"><button class="submit"><i class="fa fa-check"></i></button></div>');
if (!$(this).find(".input").length) {
tdval = $(this).text();
$(this).html(editdiv);
$('.input').val(tdval);
$(".input").focus();
$(document).on('click', '.submit', function(event) {
inputval = $(".input").val();
$(this).closest(".editdiv").parent("td").html(inputval);
});
}
});
});
#CHARSET "UTF-8";
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: #f0f0f0;
}
div {
overflow-x: hidden;
}
table {
border-collapse: collapse;
width: 90%;
margin: 0 auto;
margin-top: 100px;
background: #fff;
}
thead {
background: #f05858;
color: #fff;
}
th,
td {
padding: 15px;
text-align: left;
border: 1px solid #ccc;
}
tbody td {
height: auto;
cursor: pointer;
width: 200px;
overflow: hidden;
}
i {
float: right;
cursor: pointer;
}
input[type=text] {
border: 1px solid #ccc;
border-radius: 0px;
height: 20px;
}
button {}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic Table</title>
<link href="fonts/css/font-awesome.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>First<i class="fa fa-cogs" aria-hidden="true"></i>
</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
<th>Fifth</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
</body>
</html>
I am trying to build a dynamic table and I want to have edit option for each <td> in each row. But Whenever I click multiple <td> to edit I am getting the recent clicked <td> value inside all input fields, how to get only the clicked value inside the input using jquery.

The main issue in your code is that you're accessing all the .input elements, even when there may be multiple instances. Instead you should use DOM traversal to access only those which are related to the element which raised the event, or to the HTML which is being appended.
Also note that the delegated event handler should not be inside the click handler. Try this:
$(document).ready(function() {
$("td").on("click", function() {
var $td = $(this);
var $editdiv = $('<div class="editdiv"><input type="text" class="input"><button class="submit"><i class="fa fa-check"></i></button></div>');
if (!$td.find(".input").length) {
var tdText = $td.text();
$td.html($editdiv);
$editdiv.find('.input').val(tdText).focus();
}
});
$(document).on('click', '.submit', function(event) {
var inputval = $(this).prev(".input").val();
$(this).closest(".editdiv").parent("td").html(inputval);
});
});
#CHARSET "UTF-8";
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: #f0f0f0;
}
div {
overflow-x: hidden;
}
table {
border-collapse: collapse;
width: 90%;
margin: 0 auto;
margin-top: 100px;
background: #fff;
}
thead {
background: #f05858;
color: #fff;
}
th,
td {
padding: 15px;
text-align: left;
border: 1px solid #ccc;
}
tbody td {
height: auto;
cursor: pointer;
width: 200px;
overflow: hidden;
}
i {
float: right;
cursor: pointer;
}
input[type=text] {
border: 1px solid #ccc;
border-radius: 0px;
height: 20px;
}
button {}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic Table</title>
<link href="fonts/css/font-awesome.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>First<i class="fa fa-cogs" aria-hidden="true"></i>
</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
<th>Fifth</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
</body>
</html>

Your problem is in $('.input').val(tdval);, because here you are selecting all inputs, while you only want the input inside of editdiv
So, you just need to add a parent selector to select that specific input, like this:
$('.input', $(this))
$(document).ready(function() {
$("td").on("click", function() {
var tdval, inputval, editdiv = "";
editdiv = $('<div class="editdiv"><input type="text" class="input"><button class="submit"><i class="fa fa-check"></i></button></div>');
if (!$(this).find(".input").length) {
tdval = $(this).text();
$(this).html(editdiv);
$('.input', $(this)).val(tdval);
$('.input', $(this)).focus();
$(document).on('click', '.submit', function(event) {
inputval = $('.input', $(this).closest(".editdiv")).val();
$(this).closest(".editdiv").parent("td").html(inputval);
});
}
});
});
#CHARSET "UTF-8";
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: #f0f0f0;
}
div {
overflow-x: hidden;
}
table {
border-collapse: collapse;
width: 90%;
margin: 0 auto;
margin-top: 100px;
background: #fff;
}
thead {
background: #f05858;
color: #fff;
}
th,
td {
padding: 15px;
text-align: left;
border: 1px solid #ccc;
}
tbody td {
height: auto;
cursor: pointer;
width: 200px;
overflow: hidden;
}
i {
float: right;
cursor: pointer;
}
input[type=text] {
border: 1px solid #ccc;
border-radius: 0px;
height: 20px;
}
button {}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic Table</title>
<link href="fonts/css/font-awesome.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>First<i class="fa fa-cogs" aria-hidden="true"></i>
</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
<th>Fifth</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
</body>
</html>

Fix table header at top of scrollable div

The div in this example is scrollable, how do I make the header of the table fixed to the top of the div?
<div id="table" style="overflow: auto; border: 1px solid;">
<table id="table_id">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>

I would split into 2 sections and dictate the widths (% if responsive).
<table id="table-top">
<tr>
<th>A</th>
<th>B</th>
</tr>
</table>
<div id="table">
<table id="table_id">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
CSS....
#table{
overflow-y: auto;
height:150px;
border-bottom:1px solid grey;
}
table{
width:100%;
}
table td, table th{
border-color: grey;
border: 1px solid;
width:50%;
}
https://jsfiddle.net/tonytansley/mvp4u54q/

Hide/Show HTML tables [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have an HTML document which contains tables. Some tables are subtables of other ones. You can have an example here:
HTML :
<table class='top'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>A</td>
</tr>
</table>
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>B</td>
</tr>
</table>
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>C</td>
</tr>
</table>
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>D</td>
</tr>
</table>
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>E</td>
</tr>
</table>
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>F</td>
</tr>
</table>
<table class='top'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>G</td>
</tr>
</table>
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>H</td>
</tr>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>I</td>
</tr>
</table>
CSS :
table {
border-collapse: collapse;
border-width: 0px 0;
box-shadow: 3px 3px 4px #AAA;
}
.greyrow{
background-color: #c7c7c7;
font-size: 16px;
text-align: center;
color: black;
font-family: Verdana;
}
td{
width: 100px;
}
.top{
margin-bottom: 10px;
}
.sub1{
display: none;
margin-left: 20px;
margin-bottom: 10px;
}
.sub2{
display: none;
margin-left: 40px;
margin-bottom: 10px;
}
I would like to have only the toplevel tables displayed as default. This can be done with the css property "display: none".
I would like to show the subtables when the user clicks on the upper level table. Any existing jquery script for this ?

Here, I've created a jsfiddle with what you're asking for. You can create as many subtables as you could possibly want, this code will still work, and it's light on the fiddle.
HTML edit: I've surrounded the table you're cascading from, and the tables being cascaded from it in a div tag with the class ". clickable" <div class="clickable">...</div>
CSS edit: I've set all ".clickable" children with the same class (.clickable>.clickable{...}) to display:none;
JS edit: The code is activated when you click on the immediate child table element. It then gets that table's parent and finds its immediate child with the ".clickable" class and slideToggles it (you can set a different effect if you'd like, I assumed that this was the look you wanted)
HTML
<div class="clickable">
<table class='top'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>A</td>
</tr>
</table>
<div class="clickable">
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>B</td>
</tr>
</table>
<div class="clickable">
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>C</td>
</tr>
</table>
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>D</td>
</tr>
</table>
</div>
</div>
<div class="clickable">
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>E</td>
</tr>
</table>
<div class="clickable">
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>F</td>
</tr>
</table>
</div>
</div>
</div>
<div class="clickable">
<table class='top'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>G</td>
</tr>
</table>
<div class="clickable">
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>H</td>
</tr>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>I</td>
</tr>
</table>
</div>
</div>
CSS
table {
border-collapse: collapse;
border-width: 0px 0;
box-shadow: 3px 3px 4px #AAA;
}
.greyrow {
background-color: #c7c7c7;
font-size: 16px;
text-align: center;
color: black;
font-family:Verdana;
}
td {
width: 100px;
}
.top {
margin-bottom:10px;
}
.sub1 {
margin-left: 20px;
margin-bottom:10px;
}
.sub2 {
margin-left: 40px;
margin-bottom:10px;
}
.clickable {
cursor:pointer;
}
.clickable>.clickable {
display:none;
}
JS
$(".clickable").children("table").click(function () {
$(this).parent().children(".clickable").slideToggle();
});

I made a jsFiddle to do this. Is this what you are looking for?
HTML:
<table class='top' id='A'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>A</td>
</tr>
</table>
<table class='sub1 sub_A' id='A1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>B</td>
</tr>
</table>
<table class='sub2 sub_A1'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>C</td>
</tr>
</table>
<table class='sub2 sub_A1'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>D</td></tr>
</table>
<table class='sub1 sub_A' id='A2'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>E</td>
</tr>
</table>
<table class='sub2 sub_A2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>F</td>
</tr>
</table>
<table class='top' id='G'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>G</td>
</tr>
</table>
<table class='sub1 sub_G'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>H</td>
</tr>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>I</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
border-width: 0px 0;
box-shadow: 3px 3px 4px #AAA;
}
.greyrow{
background-color: #c7c7c7;
font-size: 16px;
text-align: center;
color: black;
font-family: Verdana;
}
td{
width: 100px;
}
.top{
margin-bottom: 10px;
}
.sub1{
display: none;
margin-left: 20px;
margin-bottom: 10px;
width: 200px;
}
.sub2{
display: none;
margin-left: 40px;
margin-bottom: 10px;
width: 200px;
}
JQuery:
$(document).ready(function() {
var Clicks = [];
function click(id, numClicks) {
this.id = id;
this.numClicks = numClicks;
}
$(".top").click(function() {
var access = -1;
for (var c=0;c<Clicks.length;c++) {
if (Clicks[c].id === this.id) {
Clicks[c].numClicks += 1;
access = c;
c = Clicks.length;
}
}
if (access === -1) {
access = Clicks.length;
Clicks.push(new click(this.id, 1));
}
if (Clicks[access].numClicks % 2 !== 0) {
$((".sub_"+(this.id))).css('display', 'block');
} else {
$((".sub_"+(this.id)+'1')).css("display", "none");
$((".sub_"+(this.id))).css("display", "none");
}
});
$(".sub1").click(function() {
id = this.id;
var access = -1;
for (var c=0;c<Clicks.length;c++) {
if (Clicks[c].id === id) {
Clicks[c].numClicks += 1;
access = c;
c = Clicks.length;
}
}
if (access === -1) {
access = Clicks.length;
Clicks.push(new click(this.id, 1));
}
if (Clicks[access].numClicks % 2 !== 0) {
$((".sub_"+(id))).css('display', 'block');
} else {
$((".sub_"+(id))).css("display", "none");
}
});
});

Categories

Resources