How to enable HTML table scrolling on a single column? [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm starting to develop an HTML/Javascript/jquery application.
I have an HTML table with 100 rows and 5 columns.
I can display only 10 rows of this table on my device, so I need to scroll up and down on this table to display all values.
In order to do this, I need to enable scrolling only on the middle column. With the scroll event on the middle column, the table should scroll normally.
With the scroll event on other column, the table shouldn't scroll.
Furthermore, the table has a header and a footer. These elements must be fixed on table scroll.
Can you post some idea or piece of code to do that?


Simply toggle overflow-y values auto / hidden when a desired column is hovered
var $container = $("#container");
$container.find("td").hover(function(){
$container.toggleClass("oyScroll", $(this).index() == 1);
});
#container {
height:170px;
overflow:hidden;
}
#container.oyScroll {
overflow-y: auto;
}
table {
width:100%;
}
table td {
background:#eee;
padding: 12px 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>

Related

Use main scrollbar to scroll all elements in the page

<html>
<head>
<style>
html {
overflow: scroll;
}
table {
width: 500px;
display: block;
background: gray;
margin: 0 auto;
}
tbody {
overflow: auto;
}
td {
padding: 50px;
}
</style>
</head>
<body>
<table id="results_body">
<tbody class="content" style="display: block;">
<tr>
<th>HEADER</th>
<th>HEADER</th>
<th>HEADER</th>
<th>HEADER</th>
<th>HEADER</th>
<th>HEADER</th>
<th>HEADER</th>
<th>HEADER</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
</tbody>
</table>
</body>
</html>
The issue when the table's horizontal scrollbar is not in view (as shown in the sc attached) it's inconvenient to scroll the table. What I want to achieve is to allow the user to use the main scrollbar (body scrollbar) to scroll every thing in the page including the tables or keep the horizontal scroll bar in the view, it's kinda tricky since I will have many tbody and I can't wrap them in div.
Thank you in advanced

Do not set the scrollbar in the table. Set it in the html body.
body {
overflow: auto;
}

CSS Only Fixed Table Headers with out Table header with only td and tr

I have been trying to create a sticky table header with out table header with only the first tr will have the sticky head , can any one help with only CSS?
Please use this fiddle to fix , not the below table
https://jsfiddle.net/x243jqbg/
<table class="table">
<tbody>
<tr>
<td>row 1</td>
<td>row 2</td>
<td>row 3</td>
<td>row 4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
Like Below https://codepen.io/chriscoyier/pen/PrJdxb

You can use tr:first-child selector to target the first row. And then style it accordingly.
.table {
position: relative;
}
tr:first-child td {
top: 0;
position: sticky;
background: lightblue;
}
<table class="table">
<tbody>
<tr>
<td>row 1</td>
<td>row 2</td>
<td>row 3</td>
<td>row 4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>

Set your table as position: relative
table {
text-align: left;
position: relative;
border-collapse: collapse;
}
Then set the first row as position: sticky
tr:first-child td {
background: white;
position: sticky;
top: 0;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
Check out my codepen: https://codepen.io/kenneth-bolico/pen/QWLoNry

Alternate Table Row Background Color Based on Column Value Changing

I'm reading data into an html table from a database and would like to alternate the row color when the value in the first column changes -- nothing fancy just alternate between two colors to help visually group the data. The issue I'm having is the groups of data is dynamic, and I don't know how to change the colors based on dynamic data. I'm open to use CSS, jquery, javascript -- whatever tricks you have that would work. I've created a very simple jsFiddle that has all rows the same color for you to play with.
UPDATED EXPLANATION:
When I say I want the row colors to alternate based on the value of a column changing, what I mean is, when looking at my fiddle example, the table rows start off aliceblue, and the value in the first column is 1. When that value changes to 2 I want the table rows to change colors to lightgreen. When the Key column value then changes to 3 I want the colors to switch back to aliceblue. When the key column value changes to 4 I want it to flip back to light green. Hope this helps to clarify...
As always, any help you can give would be greatly appreciated!!
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
<div id="banner-message">
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>

I have added some javascript logic to make it work. I have added two scenarios. One if class should be based on the Odd/Even values and another is if class should be based on the value change.
See the Snippet below:
$(document).ready(function(){
$("#banner-message tbody tr").each(function() {
if(parseInt($(this).find("td").first().html()) % 2 == 0){
$(this).addClass("altColor");
}
});
let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != parseInt($(this).find("td").first().html())){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = parseInt($(this).find("td").first().html());
});
});
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
div {
display:inline-block;
padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
Based on the Even/Odd values
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div id="banner-message2">
Based on the value change
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I hope this will help you :)

You can alternate color on a table with the :nth-child selector and the odd and even rules.
More can be found there https://www.w3.org/Style/Examples/007/evenodd.en.html
Try something like this:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

If you want to get the whole string in column use
$(document).ready(function(){
//let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let prevValue = $("#banner-message2 tbody tr").find("td:first").html();
console.log(prevValue);
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != $(this).find("td:first").html()){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = $(this).find("td:first").html();
});
});

Hide all the rowspan column cells in jQuery or CSS

In the below code, the first td has rowspan applied making the rest of the cells in that columns shift to the right. Here I want the cells in that column to hide instead of shifting, except the first cell which has rowspan. How do I do that in jQuery or CSS.
So, I want all the cells having 1 to be hidden except the one which was spanned.
Any suggestions would be helpful.
Fiddle: http://jsfiddle.net/a191jffw/28/
th, td{
width:70px;
}
<div id="result">
<table border="1">
<tbody>
<tr>
<td rowspan="4">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>

This might be what your looking for.
$("table tr td[rowspan]").each(function() {
var i = $("table tr td").index($(this))
$("table tbody tr").each(function(_, x) {
$(x).children('td:eq(' + i + ')').not('[rowspan]').hide();
});
})
Demo
$("table tr td[rowspan]").each(function() {
var i = $("table tr td").index($(this))
$("table tbody tr").each(function(_, x) {
$(x).children('td:eq(' + i + ')').not('[rowspan]').hide();
});
})
th, td{
width:70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">
<table border="1">
<tbody>
<tr>
<td rowspan="4">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>

Try this using jquery and css 'visibilty'.
$('table td').each( function(){
if ( !$(this).attr('rowspan') ) {
$(this).css({
'visibility' : 'hidden'
});
}
});

I perfer css to javascript, for those users which might be anti-javascript. With that said I'm throwing my solution out there.
tr > td:nth-child(1){
display:none;
}
tr:first-child > td:first-child{
display:table-cell;
}

I hope this help you.
$('#result td').each(function() {
if ((!$(this).attr('rowspan') && ($(this).html() == 1))) {
$(this).hide();
}
});
$('#result td').each(function() {
if ((!$(this).attr('rowspan') && ($(this).html() == 1))) {
$(this).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">
<table border="1">
<tbody>
<tr>
<td rowspan="4">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>

I have tried to provide a solution with pure javascript. This should also work even if you change rowspan value.
(function(){
window.addEventListener('load',function(){
var td=document.querySelector('#result td[rowspan]');
var n=Number(td.getAttribute('rowspan'));
var tr=td.parentElement;
for(var i=0;i<n-1;i++){
tr=tr.nextElementSibling;
tr.firstElementChild.style.display="none";
}
});
})()
(function(){
window.addEventListener('load',function(){
var td=document.querySelector('#result td[rowspan]');
var n=Number(td.getAttribute('rowspan'));
var tr=td.parentElement;
for(var i=0;i<n-1;i++){
tr=tr.nextElementSibling;
tr.firstElementChild.style.display="none";
}
});
})()
th, td{
width:70px;
}
<div id="result">
<table border="1">
<tbody>
<tr>
<td rowspan="4">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>

Restrict drag-and-droppable rows in HTML5

I am trying to implement drag and drop rows with in same table using html5, but I would like to restrict the drop area to few rows instead of whole table.
Code :
<table id="visibletable" class="dra-table">
<thead>
<tr>
<th>Visible</th>
<th>Width</th>
<th>Color</th>
</tr>
</thead>
<tbody ondrop="dropPart(event)" ondragover="allowDropPart(event)">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="partdesc1" draggable="true" ondragstart="dragPart(event)">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="partdesc2" draggable="true" ondragstart="dragPart(event)">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="partdesc3" draggable="true" ondragstart="dragPart(event)">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="partdesc4" draggable="true" ondragstart="dragPart(event)">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="partdesc5" draggable="true" ondragstart="dragPart(event)">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
First 3 rows in the table are not be allowed to drag and draggable rows should not be allowed to drop with in first 3 rows.
Currently I am have applied ondrop="dropPart(event)" at the tbody tag so I am able to drop rows any where in the table, Is there a way to restrict drop area?

You Can Refere Below Link For Native HTML5 Drag and Drop
http://www.redips.net/javascript/drag-and-drop-table-row/
http://www.html5rocks.com/en/tutorials/dnd/basics/

Categories