I am trying to create a 2x2 grid of tables in HTML, where each table is independently collapsible. I can't seem to figure out a proper solution. For example, the version below somewhat works, but unfortunately when the R1C1 table is hidden, the row 2 tables become joined with the first row.
<!DOCTYPE html>
<!-- Attempt at a 2x2 grid of tables, each independently collapsible
Based on following web pages (among others):
- http://www.delphifaq.com/faq/javascript/f1030.shtml
- http://www.w3schools.com/css/css_table.asp
-->
<html>
<head>
<title>2x2 table grid</title>
<style>
table, th, td
{
border-collapse:collapse;
border:1px solid black;
width=50%
}
</style>
<script language="JavaScript" type="text/javascript">
function setDivStyle(table, style) {
// Set the display style
var tbl = document.getElementById(table);
tbl.style.display = style;
console.log(table + " display style set to " + style)
}
</script>
</head>
<body>
<div id="r1">
<h2>Row 1</h2>
<div id="r1-controls">
<a id="r1c1-hide" href="javascript:setDivStyle('r1c1', 'none')">Hide R1C1</a>
<a id="r1c2-show" href="javascript:setDivStyle('r1c1', 'inline')">Expand R1C1</a>
<a id="r1c2-hide" href="javascript:setDivStyle('r1c2', 'none')">Hide R1C2</a>
<a id="r1c2-show" href="javascript:setDivStyle('r1c2', 'inline')">Expand R1C2</a>
<br>
</div>
<table id="r1c1" style="display: inline; float: left">
<tr>
<th>R1C1a</th>
<th>R1C1b</th>
<th>R1C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
<table id="r1c2" style="display: block; float: none">
<tr>
<th>R1C2a</th>
<th>R1C2b</th>
<th>R1C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
</div>
<div id="r2">
<h2>Row 2</h2>
<div id="r2-controls">
<a id="r2c1-hide" href="javascript:setDivStyle('r2c1', 'none')">Hide R2C1</a>
<a id="r2c1-show" href="javascript:setDivStyle('r2c1', 'inline')">Expand R2C1</a>
<a id="r2c2-hide" href="javascript:setDivStyle('r2c2', 'none')">Hide R2C2</a>
<a id="r2c2-show" href="javascript:setDivStyle('r2c2', 'inline')">Expand R2C2</a>
<br>
</div>
<table id="r2c1" style="display: inline; float: left">
<tr>
<th>R2C1a</th>
<th>R2C1b</th>
<th>R2C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
<table id="r2c2" style="display: block; float: none">
<tr>
<th>R2C2a</th>
<th>R2C2b</th>
<th>R2C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
</div>
</body>
</html>
I've had problems similar to this before. Its the float:left that is causing Row 2 to move up when R1C2 is hidden. I recommend creating another function that will toggle float:left when you hide R1C2 like so:
function setFloat(element, style) {
var el = document.getElementById(element);
el .style.float = style;
console.log(element + " float style set to " + style)
}
and calling it: javascript:setDivStyle('r1c2', 'none');setFloat('r1c1','none');
Related
I've got 2 tables that I'm trying to shift rows between in HTML using JavaScript, but I'm not having much luck at the moment. I've tried plenty of solutions from here but none of them seem to be working for me at the moment!
Currently my HTML code is as per below
.container {
overflow: hidden
}
.tab {
float: left
}
.tab-btn {
margin: 50px
}
button {
display: block;
margin-bottom: 20px
}
<div class="container-fluid">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">Manage Schools</h5>
<div class="container">
<div class="tab">
<table class="table table-sm table-hover" id="table1">
<tr>
<th>School ID</th>
<th>School Name</th>
<th>Select</th>
</tr>
<tr>
<td>1</td>
<td>School A</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>2</td>
<td>School B</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>3</td>
<td>School C</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>4</td>
<td>School D</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>5</td>
<td>School E</td>
<td>
<input type="checkbox" "></td>
</tr>
<tr>
<td>6</td>
<td>School F</td>
<td><input type="checkbox "></td>
</tr>
</table>
</div>
<div class="tab tab-btn ">
<button>Add</button>
<button>Remove</button>
</div>
<div class="tab ">
<table class="table table-sm table-hover " id="table2 ">
<tr>
<th>School ID</th>
<th>School Name</th>
<th>Select</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Ideally, once a row has been shifted from table1 to the table2, it can then be removed from the table2 using the remove button. Also being able to select multiple rows and moving them at the same time would be a huge advantage.
Any and all help with the JavaScript would be very much appreciated!
document.getElementById("top").onscroll = function()
{
var div = document.getElementById("top").scrollTop;
var div1 = document.getElementById("top1").scrollTop;
var div2top = document.getElementById("d3").scrollTop;
var div2left = document.getElementById("d3").scrollLeft;
if(div>0){
c = document.getElementById("d3");
c.scrollTo(div2left, div);
}
var offsetHeight = 0;
var scrollHeight = 0;
}
.table-wrapper {
display:flex;
height:100px;
overflow-y:scroll;
box-sizing:border-box;
}
.innerdiv{
//height:200px;
height:100px;
display:flex;
}
.d{
//float:left;
// position:relative;
}
.d3{
position:absolute;
width:100px;
height:100px;
left:290px;
overflow-x:overlay;
overflow-y:none;
}
#d3::-webkit-scrollbar {
width: 0px;
height:5px;
background-color: #F5F5F5;
}
.d4{
margin-left:100px;
}
<div onscroll="scroll();" class="table-wrapper" id="top">
<div class="innerdiv" id="top1">
<div class="d d1">
<table>
<thead>
<tr>
<th>Heading1</th>
<th>Heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
</tbody>
</table>
</div>
<div class="d d2">
<table>
<thead>
<tr>
<th>Heading3</th>
<th>Heading4</th>
</tr>
</thead>
<tbody>
<tr>
<td>cont3</td>
<td>cont4</td>
</tr>
<tr>
<td>cont3</td>
<td>cont4</td>
</tr>
<tr>
<td>cont3</td>
<td>cont4</td>
</tr>
<tr>
<td>cont3</td>
<td>cont4</td>
</tr>
<tr>
<td>cont3</td>
<td>cont4</td>
</tr>
<tr>
<td>cont3</td>
<td>cont4</td>
</tr>
</tbody>
</table>
</div>
<div class="d d3" id="d3">
<table>
<thead>
<tr>
<th>Heading5</th>
<th>Heading6</th>
</tr>
</thead>
<tbody>
<tr>
<td>cont5</td>
<td>cont6</td>
</tr>
<tr>
<td>cont5</td>
<td>cont6</td>
</tr>
<tr>
<td>cont5</td>
<td>cont6</td>
</tr>
<tr>
<td>cont5</td>
<td>cont6</td>
</tr>
<tr>
<td>cont5</td>
<td>cont6</td>
</tr>
<tr>
<td>cont5</td>
<td>cont6</td>
</tr>
</tbody>
</table>
</div>
<div class="d d4">
<table>
<thead>
<tr>
<th>Heading7</th>
<th>Heading8</th>
</tr>
</thead>
<tbody>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
My original requirement, http://jsfiddle.net/f7ht9gow/9/. But, I couldn't stop horizontal scrollbar div moving vertically. So, I tried doing it with pure js using some article though something went wrong with Horizontal scrolling and it is not moving. Can anybody help me? Here is the fiddle for vertical and horizontal scroll bars.
Than you all!
I check fiddle that you share, If I understand you correctly you want an horizontal scroll in the middle
just change this part of your CSS code overflow-x:scroll;
like this
.d3{
position:absolute;
width : 100px;
height : 100px;
left : 290px;
overflow-x:scroll;
overflow-y:none;
}
I would like to know how to create sub-header columns by only using javascript. My data is coming from server so I just want to create columns and subheaders.
So columns I have already created but how to have subheader with only javascript ( css can be there) but not with the help of html that I am not able to get.
Can someone help me with this.
this is some demo of table -
here at top I need to add two subheader with 3 columns
$(document).ready(function() {
$('#addSubHeader').click(function() {
var subHeader = "<tr><th>3</th><th>4</th>><th>5</th><th>6</th></tr>";
$(subHeader).appendTo("thead");
});
});
th {
text-align:center;
}
td {
width: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th colspan="2">1</th>
<th colspan="2">2</th>
</tr>
</thead>
<tbdody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
</tbdody>
</table>
<button id="addSubHeader">
add a subheader</button>
</button>
I am trying to override a bootstrap class using JavaScript. The problem is that value of display is changed by the Javascript code but the HTML rows aren't displayed. If I use !important in the style block in custom.css bootstrap is overridden and the JavaScript assignment is still the HTML rows aren't displayed....can anyone tell me whats wrong here. I did try using an ID then chaining the elements (#id.class) that didn't work either. (the code works fine without bootstrap)
custom css
body {
margin-top:30px;
}
.hidden
{
display: none;
}
HTML
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script> src="js/bootstrap.min.js"</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<table class="hidden table table-striped table-border">
<tbody>
<tr class="hidden">
<td>List ............</td>
</tr>
<tr class="hidden active">
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr class="hidden">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="hidden">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="hidden">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class="hidden">
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr class="hidden">
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="well col-md-8">
<p>Test Messages.........</p>
</div>
</div>
</body>
<script type="text/javascript">
var count=4;
var activerows=document.getElementsByClassName("hidden");
if(count <= activerows.length){
for (var i=0; i<count; i++)
{
activerows[i].style.display="block";
}
}else
{
for (var i=0; i<activerows.length; i++)
{
// activerows[i].style.display='block';
}
}
</script>
</html>
If Bootstrap is the main culprit then don't use its class and simply use your custom class hideme or something and then override it using Javascript like I have done in this snippet below:
var count = 4;
var activerows = document.getElementsByClassName("hideme"),
tablehasClass = document.getElementById("table").classList;
if (count <= activerows.length) {
tablehasClass.remove("hideme");
for (var i = 0; i < count; i++) {
activerows[i].style.display = "table-row";
}
} else {
for (var i = 0; i < activerows.length; i++) {
// activerows[i].style.display='';
}
}
body {
margin-top: 30px;
}
.hideme {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<table id="table" class="hideme table table-striped table-border">
<tbody>
<tr class="hideme">
<td>List ............</td>
</tr>
<tr class="hideme active">
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr class="hideme">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="hideme">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="hideme">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class="hideme">
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr class="hideme">
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="well col-md-8">
<p>Test Messages.........</p>
</div>
</div>
</body>
</html>
table is very keen of its elements so never use display: block us display: table-row for tr, display: table-cell for td and similarly display: table for table
Instead of setting the style from javascript you should remove the class from the element.
Alternatively you can set the cssText of the element style to display:block !important
var count=4;
var activerows=document.getElementsByClassName("hidden");
if(count <= activerows.length){
for (var i=0; i<count; i++)
{
activerows[i].style.cssText = 'display:block !important';
}
}else
{
for (var i=0; i<activerows.length; i++)
{
// activerows[i].style.display='block';
}
}
body {
margin-top:30px;
}
.hidden
{
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-8">
<table class="hidden table table-striped table-border">
<tbody>
<tr class="hidden">
<td>List ............</td>
</tr>
<tr class="hidden active">
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr class="hidden">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="hidden">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="hidden">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class="hidden">
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr class="hidden">
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="well col-md-8">
<p>Test Messages.........</p>
</div>
</div>
Please change this row
activerows[i].style.display="block";
with
$(activerows[i]).attr("style", "display: block !important");
or
$(activerows[i]).removeClass('hidden');
You need !important again to override the previous !important.
https://jsfiddle.net/nqtafyg2/6/
I need to stress that this is about HORIZONTAL scrolling with THE FIRST COLUMN FIXED because most answers are giving me solutions to vertical scrolling.
Is it possible using pure css to have a table that scrolls horizontally but the first header and first column are fixed with the rest of the content scrollable?
For example if I had this table:
<table>
<thead>
<tr>
<th class="head1">Head 1</th>
<th class="head2">Head 2</th>
<th class="head2">Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">Col 1</td>
<td class="col2">Col 2</td>
<td class="col3">Col 3</td>
</tr>
</tbody>
</table>
The head1 and col1 would always be shown with the other columns scrollable.
This is what I was after. The example uses 2 tables that are floated left with an overflow applied to a div that wraps the right most table. Both tables are contained in a div with a fixed width.
<div class="table-container">
<div class="left">
<table>
...
</table>
</div>
<div class="right">
<table>
...
</table>
</div>
</div>
.table-container {
position: relative;
width: 600px;
height: 100%;
display: inline-block;
}
table {
float: left;
}
.right {
overflow: auto;
}
<table >
<tr>
<th>abc</th>
<th>xyz</th>
</tr>
<tr>
<td colspan="2">
<div style="height:50px; overflow:scroll;">
<table>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Please check it. It may be work.