We Keep Coding

Overflow hidden and scroll same time

How can I create two independent containers with fixed headers and scrollable body like this i have manage to create fixed table headers but i couldn't create scrollable body that both can scroll same time at vertically and only one can scroll horizontally.
Left side tree table and gantt chart both can be scroll horizontally, but right side Gantt chart only scrolls vertically.
Please check my code below, i hace acchived almost what i want, but i neet to fix two things
1) Need to fix the Header on table B but without breaking horizontal scroll behavior
2) How can Make both A & B vertical scrolls can happen at syncrounasly at same time, like when someone scrolls Table A table b alsp needto be scroll at the same time in vertically only.
like this link http://www.bryntum.com/playpen/react/ (add some task to activate the scroll)
PLEASE CHECK THIS CODE SNIPPET IN FULL PAGE
th, td{
padding: 10px 20px;
width: 100px;
}
th{
background: #fff;
}
td{
background: #efefef;
}
.fl{
float: left;
}
.panel_body{
height: 200px;
width: 430px;
overflow: hidden;
overflow-y:scroll;
}
.panel_body.scroll_h{
overflow-x: scroll;
width: 300px;
height: 240px;
}
.scroll_h table{
width: 500px;
}
<div class="panel">
<div class="fl panel_left">
<header>
<table>
<thead>
<tr>
<th>Table A</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
</table>
</header>
<section class="panel_body">
<table>
<tbody>
<tr>
<td>Name1</td>
<td>Start1</td>
<td>End1</td>
</tr>
<tr>
<td>Name2</td>
<td>Start2</td>
<td>End2</td>
</tr>
<tr>
<td>Name3</td>
<td>Start3</td>
<td>End3</td>
</tr>
<tr>
<td>Name4</td>
<td>Start4</td>
<td>End4</td>
</tr>
<tr>
<td>Name5</td>
<td>Start5</td>
<td>End5</td>
</tr>
<tr>
<td>Name6</td>
<td>Start6</td>
<td>End6</td>
</tr>
<tr>
<td>Name7</td>
<td>Start7</td>
<td>End7</td>
</tr>
<tr>
<td>Name8</td>
<td>Start8</td>
<td>End8</td>
</tr>
<tr>
<td>Name9</td>
<td>Start9</td>
<td>End9</td>
</tr>
<tr>
<td>Name10</td>
<td>Start10</td>
<td>End10</td>
</tr>
<tr>
<td>Name11</td>
<td>Start11</td>
<td>End11</td>
</tr>
<tr>
<td>Name12</td>
<td>Start12</td>
<td>End12</td>
</tr>
<tr>
<td>Name13</td>
<td>Start13</td>
<td>End13</td>
</tr>
<tr>
<td>Name14</td>
<td>Start14</td>
<td>End14</td>
</tr>
<tr>
<td>Name15</td>
<td>Start15</td>
<td>End15</td>
</tr>
<tr>
<td>Name16</td>
<td>Start16</td>
<td>End16</td>
</tr>
<tr>
<td>Name17</td>
<td>Start17</td>
<td>End17</td>
</tr>
<tr>
<td>Name18</td>
<td>Start18</td>
<td>End18</td>
</tr>
<tr>
<td>Name19</td>
<td>Start19</td>
<td>End19</td>
</tr>
<tr>
<td>Name20</td>
<td>Start20</td>
<td>End20</td>
</tr>
</tbody>
</table>
</section>
</div>
<di class="fl panel_right">
<section class="panel_body scroll_h">
<table>
<thead>
<tr>
<th>Table B</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Start1</td>
<td>End1</td>
</tr>
<tr>
<td>Name2</td>
<td>Start2</td>
<td>End2</td>
</tr>
<tr>
<td>Name3</td>
<td>Start3</td>
<td>End3</td>
</tr>
<tr>
<td>Name4</td>
<td>Start4</td>
<td>End4</td>
</tr>
<tr>
<td>Name5</td>
<td>Start5</td>
<td>End5</td>
</tr>
<tr>
<td>Name6</td>
<td>Start6</td>
<td>End6</td>
</tr>
<tr>
<td>Name7</td>
<td>Start7</td>
<td>End7</td>
</tr>
<tr>
<td>Name8</td>
<td>Start8</td>
<td>End8</td>
</tr>
<tr>
<td>Name9</td>
<td>Start9</td>
<td>End9</td>
</tr>
<tr>
<td>Name10</td>
<td>Start10</td>
<td>End10</td>
</tr>
<tr>
<td>Name11</td>
<td>Start11</td>
<td>End11</td>
</tr>
<tr>
<td>Name12</td>
<td>Start12</td>
<td>End12</td>
</tr>
<tr>
<td>Name13</td>
<td>Start13</td>
<td>End13</td>
</tr>
<tr>
<td>Name14</td>
<td>Start14</td>
<td>End14</td>
</tr>
<tr>
<td>Name15</td>
<td>Start15</td>
<td>End15</td>
</tr>
<tr>
<td>Name16</td>
<td>Start16</td>
<td>End16</td>
</tr>
<tr>
<td>Name17</td>
<td>Start17</td>
<td>End17</td>
</tr>
<tr>
<td>Name18</td>
<td>Start18</td>
<td>End18</td>
</tr>
<tr>
<td>Name19</td>
<td>Start19</td>
<td>End19</td>
</tr>
<tr>
<td>Name20</td>
<td>Start20</td>
<td>End20</td>
</tr>
</tbody>
</table>
</section>
</di>
</div>
With css and | or Js.

Define a width and height to the scrollable element.
Then use the overflow property:
#container {
width: 200px;
height: 200px;
overflow: scroll;
}
#container div {
width: 100%;
height: inherit;
}
#a { background: cornflowerblue; }
#b { background: brown; }
<div id="container">
<div id="a"></div>
<div id="b"></div>
</div>
You can set a horizontal/vertical scroll with overflow-x/overflow-y.
see MDN - overflow
PS: but please search for existing questions (and answers), post some code,etc. Here's an example but it will never fit your actual project.

Keep buttons in fixed position when toggling accordion expand/collapse

I am using two buttons and some jQuery to toggle (expand/collapse) two divs with tables inside them. When I toggle the first div with button 1, button 2 gets pushed down below the div. How could I adjust my code so the buttons will stay in the same position and just toggle the divs below.
Here's a codepen:
http://codepen.io/anon/pen/EjGrKX
HTML
<div id="accordion">
<button type="button" class="btn btn-success accordion-toggle" id="btnMatch">
Matched</button>
<div class="accordion-content">
<table class="table" id="match-table">
<thead>
<tr>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Test
</td>
<td>
Test
</td>
<td>
Test
</td>
<td>
Test
</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-danger accordion-toggle" id="btnNoMatch">
No Match</button>
<div class="accordion-content">
<table class="table" id="no-match-table">
<thead>
<tr>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Test
</td>
<td>
Test
</td>
<td>
Test
</td>
<td>
Test
</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
#btnMatch {
margin-right: 10px;
}
.accordion-toggle {cursor: pointer;}
.accordion-content {display: none;}
JS
$(document).ready(function ($) {
$("#accordion").find(".accordion-toggle").click(function () {
$(this).next().slideToggle("fast");
$(".accordion-content").not($(this).next()).slideUp("fast");
});
});
If I just put the buttons next to eachother, then button 1 will toggle button 2 instead of the content I would like.

If you map button to accordion-content div using index, you can keep buttons together in HTML.
JS
$("#accordion").find(".accordion-toggle").click(function () {
var selectedAccordion = $(".accordion-content").eq($(this).index());
selectedAccordion.slideToggle("fast");
$(".accordion-content").not(selectedAccordion).slideUp("fast");
});
HTML
<div id="accordion">
<button type="button" class="btn btn-success accordion-toggle" id="btnMatch">
Matched</button>
<button type="button" class="btn btn-danger accordion-toggle" id="btnNoMatch">
No Match</button>
<div class="accordion-content">
<table class="table" id="match-table">
<thead>
<tr>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Test
</td>
<td>
Test
</td>
<td>
Test
</td>
<td>
Test
</td>
</tr>
</tbody>
</table>
</div>
<div class="accordion-content">
<table class="table" id="no-match-table">
<thead>
<tr>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Test
</td>
<td>
Test
</td>
<td>
Test
</td>
<td>
Test
</td>
</tr>
</tbody>
</table>
</div>
</div>

I made a few CSS changes to keep the buttons where they are. Looks like it works:
button {
position: absolute;
top: 0;
}
#btnNoMatch {
left: 100px;
}
.accordion-content {
margin-top: 40px;
}

Here is a quick example. http://jsfiddle.net/et8mLa0c/
HTML
<div id="outer_wrapper">
<div id="buttons_container">
Open Table One
|
Open Table Two
</div>
<table id="table_one">
<tr>
<td>Table One</td>
</tr>
<tr>
<td>Table One</td>
</tr>
<tr>
<td>Table One</td>
</tr>
</table>
<table id="table_two">
<tr>
<td>Table Two</td>
</tr>
<tr>
<td>Table Two</td>
</tr>
<tr>
<td>Table Two</td>
</tr>
</table>
</div>
CSS
#buttons_container{
height:50px;
position:relative;
}
a.toggle_button{
text-decoration:none;
}
table{
left:10px;
top:50px;
width:350px;
display:none;
position:absolute;
border:solid 1px #ddd;
border-collapse:collapse;
}
table td{
border:solid 1px #ddd;
}
Javascript
$(document).ready(function(){
var $tables = $('table'),
$btns = $('.toggle_button');
$btns.click(toggleTable);
function toggleTable(event){
event.preventDefault();
var $target = $(event.target);
var tableId = $target.data("table");
$tables.hide();
$('#' + tableId).show();
}
});

jquery to highlight the selected row and column in a table

I want to highlight the complete row and column of the selected cell in a html table using jquery. I came across many examples using CSS but could not find using jquery. Please suggest.
Please find the fiddle : http://jsfiddle.net/0w9yo8x6/70/
Below is the html code:
<div>
<table>
<tr>
<td>
<table border="1px">
<tr>
<td></td>
<td bgcolor="grey">
<br>Column1
</td>
<td bgcolor="grey">
<br>Column2
</td>
<td bgcolor="grey">
<br>Column3
</td>
<td bgcolor="grey">
<br>Column4
</td>
<td bgcolor="grey">
<br>Column5
</td>
</tr>
<tr>
<td bgcolor="grey" >Row1</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data1 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data2 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data3 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data4 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data5 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row2</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data1 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data2 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data3 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data4 </td>
</tr>
</table>
</td>
<td >
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data5 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row3</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data1 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data2 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data3 </td>
</tr>
</table>
</td>
<td >
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data4 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data5 </td>
</tr>
</table>
</td>
</tr>
</table></td></tr></table></div>
--EDIT--
I cannot simplify/modify my table structure as it is generating dynamically and retrieving the values from database and display's in cells. With my existing structure as i shown in the question / fiddle http://jsfiddle.net/0w9yo8x6/70/ i need to achieve the row and column highlight.
Thanks.

CSS-Tricks covered a small tutorial on how to do this with JS/jQuery here:
http://css-tricks.com/row-and-column-highlighting/
The best way is shown here:
$("table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
$(this).parent().addClass("hover");
$("colgroup").eq($(this).index()).addClass("hover");
}
else {
$(this).parent().removeClass("hover");
$("colgroup").eq($(this).index()).removeClass("hover");
}
});
#page-wrap { width: 600px; margin: 0 auto; }
table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #ccc; padding: 10px; }
.slim { width: 88px; }
.hover { background-color: #eee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="1" width="100%">
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th>test</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

You can simplify your table like this:
<table>
<tr><td> <td>Column1<td>Column2<td>Column3<td>Column4<td>Column5
<tr><td>Row1<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
<tr><td>Row2<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
<tr><td>Row3<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
</table>
Many people close trs and tds, but I choose not to, because those are optional closing tags in HTML5, and in my experience, they were never needed in HTML4. (Google's Style Guide also recommends omitting optional tags.)
All presentation styles should be done in a CSS style sheet, like this:
table {
border-spacing: 0px;
}
td {
border: 1px solid #bbb;
padding: 0.2em;
}
tr:first-child, td:first-child {
background: lightgrey;
}
.hovered {
background: yellow;
}
With jQuery, you can add a hover event to the table's tds, which toggle the hovered class for the td's parent row and all the tds in its column:
$('td').hover(function() {
$(this).parent('tr').toggleClass('hovered');
$('td:eq('+this.cellIndex+')','tr').toggleClass('hovered');
});
Fiddle
Edit
Since you can't change your layout, the highlighting functionality is a bit more difficult. In this case, you can use jQuery to change your multi-table layout to a single table:
$('table:first-child').replaceWith($('table', 'table:first-child').html());
$('table').each(function() {
var td= $('td', this);
if(td.length === 1) {
$(this).replaceWith(td.html());
}
});
This allows the highlighting code to work on your existing HTML.
New Fiddle

infdig Infinite $digest Loop in table

I am implementing a table with CSS which is changed in each row but one td of table contains another table. I have implemented it like this :
HTML code :
<table width="100%" class="table">
<thead>
<tr>
<th style="width: 11%">Location</th>
<th><div>
<table class="table" style="table-layout: fixed;width: 100%; margin-bottom: 0px;">
<tr>
<th style="width: 12%">Col1</th>
<th style="width: 12%">Col2</th>
<th style="width: 12%">Col3</th>
<th style="width: 11%">Col4</th>
</tr>
</table>
</div>
</th>
</tr>
</thead>
<tbody style="overflow-y: auto; max-height: 200px;">
<tr data-ng-repeat="Loc in LocationList">
<td style="width: 11%;">{{Loc.locationName}}</td>
<td><div>
<table class="table" style="table-layout: fixed;width: 100%;margin-bottom: 0px;"">
<tr data-ng-repeat="a in Loc.locations">
<td data-ng-class="(checkEvenOrOdd()) ? 'odd' : 'even'" style="width: 12%;">{{a.subLocName}}</td>
<td data-ng-class="(!evenOrOdd) ? 'odd' : 'even'" style="width: 12%;">{{a.typeName}}</td>
<td data-ng-class="(!evenOrOdd) ? 'odd' : 'even'" style="width: 12%;">
<span style="color: red;" data-ng-show="{{a.unassigned}}">{{a.prfName}}</span>
<span data-ng-show="!{{a.unassigned}}">{{a.prfName}}</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
JS code:
$scope.evenOrOdd = true;
$scope.checkEvenOrOdd = function()
{
if($scope.evenOrOdd==true)
{
$scope.evenOrOdd=false;
return !$scope.evenOrOdd;
}
else
{
$scope.evenOrOdd=true;
return !$scope.evenOrOdd;
}
};
This code gives me correct output but after clicking one any link on the page it gives me this error
Watchers fired in the last 5 iterations: [["(checkEvenOrOdd()) ? 'odd' : 'even';
I searched for this error and tried some code changes but not able to solve it. Please note it is not just to check even or odd row. There is some ordering in rows. Kindly help.

I would instead use ng-class-even/ng-class-odd https://docs.angularjs.org/api/ng/directive/ngClassEven:
<table class="table" style="table-layout: fixed;width: 100%;margin-bottom: 0px;"">
<tr data-ng-repeat="a in Loc.locations">
<td data-ng-class-even="'even'" data-ng-class-odd="'odd'" style="width: 12%;">{{a.subLocName}}</td>
<td data-ng-class-even="'even'" data-ng-class-odd="'odd'" style="width: 12%;">{{a.typeName}}</td>
<td data-ng-class-even="'even'" data-ng-class-odd="'odd'" style="width: 12%;">
<span style="color: red;" data-ng-show="{{a.unassigned}}">{{a.prfName}}</span>
<span data-ng-show="!{{a.unassigned}}">{{a.prfName}}</span>
</td>
</tr>
</table>
Or alternatively it can be done using css but this won't work in IE8:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Add Horizontal Scroll in Jquery Mobile Table?

I have the following markup,
<table class="ui-responsive table-stroke ui-table ui-table-columntoggle"
data-mode="columntoggle" data-role="table" style=
"overflow-x: scroll !important;">
<thead>
<tr>
<th class="ui-table-priority-6" data-colstart="1"
data-priority="6" style="font-weight: bold;">SL</th>
<th class="ui-table-priority-6" data-colstart="2"
data-priority="6" style="font-weight: bold;">Cat</th>
<th class="ui-table-priority-6" data-colstart="3"
data-priority="6" style="font-weight: bold;">Brand</th>
<th class="ui-table-priority-6" data-colstart="4"
data-priority="6" style="font-weight: bold;">Product</th>
<th class="ui-table-priority-persist" data-colstart="5"
data-priority="persist" style="font-weight: bold;">Item
Code</th>
<th class="ui-table-priority-persist" data-colstart="6"
data-priority="persist" style="font-weight: bold;">Model
Number</th>
<th class="ui-table-priority-6" data-colstart="7"
data-priority="6" style="font-weight: bold;">Bundle Value</th>
<th class="ui-table-priority-persist" data-colstart="8"
data-priority="persist" style="font-weight: bold;">Old RSP</th>
<th class="ui-table-priority-persist" data-colstart="9"
data-priority="persist" style="font-weight: bold;">Promo
RSP</th>
<th class="ui-table-priority-6" data-colstart="10"
data-priority="6" style="font-weight: bold;">Reduced %age</th>
<th class="ui-table-priority-6" data-colstart="11"
data-priority="6" style="font-weight: bold;">Start Date</th>
<th class="ui-table-priority-6" data-colstart="12"
data-priority="6" style="font-weight: bold;">Vendor End
Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-table-priority-6">
<p>A115</p>
</td>
<td class="ui-table-priority-6">
<p>SDA</p>
</td>
<td class="ui-table-priority-6">
<p>Panasonic</p>
</td>
<td class="ui-table-priority-6">
<p>Blender</p>
</td>
<td class="ui-table-priority-persist">
<p>11651099</p>
</td>
<td class="ui-table-priority-persist">
<p>MXAC400</p>
</td>
<td class="ui-table-priority-6">
<p>GV 50</p>
</td>
<td class="ui-table-priority-persist">
<p><strong> 399</strong></p>
</td>
<td class="ui-table-priority-persist">
<p>
<strong> 399</strong></p>
</td>
<td class="ui-table-priority-6">
<p>0%</p>
</td>
<td class="ui-table-priority-6">
<p>Feb 26th</p>
</td>
<td class="ui-table-priority-6">
<p>Mar 8th</p>
</td>
</tr>
<tr>
<td class="ui-table-priority-6">
<p>C073</p>
</td>
<td class="ui-table-priority-6">
<p>SDA</p>
</td>
<td class="ui-table-priority-6">
<p>Tefal</p>
</td>
<td class="ui-table-priority-6">
<p>Fryer</p>
</td>
<td class="ui-table-priority-persist">
<p>11480473</p>
</td>
<td class="ui-table-priority-persist">
<p>FZ700072</p>
</td>
<td class="ui-table-priority-6">
<p>PB</p>
</td>
<td class="ui-table-priority-persist">
<p><strong>999</strong></p>
</td>
<td class="ui-table-priority-persist">
<p><strong> 749</strong></p>
</td>
<td class="ui-table-priority-6">
<p>25%</p>
</td>
<td class="ui-table-priority-6">
<p>Mar 1st</p>
</td>
<td class="ui-table-priority-6">
<p>Will Revert</p>
</td>
</tr>
</tbody>
</table>
Can I add a horizontal markup? So that users can easily scroll right and left

You can wrap your table with div like:
<div style="width: 100%; height: 400px; overflow: auto">
<table>
<!-- table content -->
</table>
</div>

If table > window width scroll will be visible dy default.
Check CSS styles and js (jQuery Mobile can fixed the table to window width)
Also you can use div container, for example:
<div style="width:300px;overflow:auto">
<table>...</table>
</div>

The answers above worked for me; however, I didn't want to specify explicit widths or heights, so the following solved the problem even better:
<div style="overflow-x: auto;">
<table [...] </table>
</div>