I have a series of tabs (divs) that are being automatically numbered on page load and a series of tables also being automatically numbered. What is a short jquery script to show/hide the tables based on the div clicked. Ex. "tab1" shows/hides "table1", "tab2" shows/hides "table2", etc.
I was hoping for a way to have this work for an infinite amount of these pairs, rather than writing
$('.tab1').click(function(){
$('.table1').toggle();
});
$('.tab2').click(function(){
$('.table2').toggle();
});
for each one
EDIT:
Link to example: https://jsfiddle.net/captainmorganms/o1ndn2b2/3/
for(var c=1;c<=your_no;c++){
$('.tab'+c).click(function(){
$('.table'+$(this).attr("class").replace("tab","")).toggle();
});
}
Just use a simple for loop for it to work!
You can do it like this:
$('.tab1,.tab2,.tab3').on('click',function(){
$('.table'+$(this).attr('class').substr($(this).attr('class').indexOf("tab") + 3)).toggle();
});
For unknow number of tables, in your case, select tabs like this:
$('.section div')
Full example here https://jsfiddle.net/_jakob/o1ndn2b2/4/
I set tables hidden by default but you can remove it in CSS if you want them to be shown at start.
Given the markup provided in the example Fiddle, you can achieve this for any number of tables with a single event listener and a few extra attributes, like so:
document.querySelector(".section").addEventListener("click",function(event){
var target=event.target,table;
if(table=target.dataset.table)
if(table=document.getElementById(table))
table.classList.toggle("hide");
},0);
.section>div{
display:inline-block;
cursor:pointer;
margin:0 5px;
border:1px solid;
padding:3px;
}
table{
border:1px solid;
border-collapse:collapse;
margin-top:15px;
}
table.hide{
display:none;
}
td{
border:1px solid;
padding:5px;
min-width:50px;
height:30px;
}
<div class="section">
<div data-table="table1">Tab1</div>
<div data-table="table2">Tab2</div>
<div data-table="table3">Tab3</div>
</div>
<table class="hide" id="table1">
<tr><td>Table 1</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="hide" id="table2">
<tr><td>Table 2</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="hide" id="table3">
<tr><td>Table 3</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
Related
I am looking for a way to freeze first three columns in html table. Sample of table: http://jsfiddle.net/ee6reLug/
<table>
...
</table>
Columns Column name1, "+" and Column name2 must be fixed and scrollable from left to right.
There is a demo for single fixed left column,
how do I create an HTML table with fixed/frozen left column and scrollable body?
but I need multple columns fixed. Is it possible in html, javascript or jquery?
answering it late.. but useful for someone searching for a solution
I've changed your code to this --> http://jsfiddle.net/PrateekPatra26/ee6reLug/5/
Separated the tables into two, one with 3 columns and the remaining table into another. Put them into div's and gave them specific width.
the css:
.pull-left {
float: left!important
}
.pull-right {
float: right!important
}
th{
height:40px;
}
td{
height:60px;
}
div's:
<div style="width:100%" class="pull-left">
<div class='pull-left' style='width:30%'>
<table>
.
.
.
</table>
</div>
<div class='pull-right' style='width:70%;overflow-x:auto'>
<table>
.
.
.
</table>
</div>
</div>
Enclose the table in a div and set a margin-left say 15em. Also set overflow-x:scroll
.outer {
overflow-x:scroll;
margin-left:15em;
overflow-y:visible;
}
Now for the first 3 columns have separate classes and set position:absolute and left to 0em, 5em and 10em respectively.
.headcol1 {
position:absolute;
width:5em;
left:0;
top:auto;
}
.headcol2 {
position:absolute;
width:5em;
left:5em;
top:auto;
}
.headcol3 {
position:absolute;
width:5em;
left:10em;
top:auto;
}
Demo here
PS: I have some problems setting the column heights. If someone could fix that it will be helpful.
I am trying to create a tooltip on a web page. I want the user to be able to roll over a link, and when they do, display arbitrary html. In this case, its a simple table, containing some meta data. I have tried using jquery.tools, but I am not sure how to use it correctly. Here is the idea:
<a id="foo">FOO</a>
<div id="tooltip-content">
I am visible when the user hovers over FOO
<table>
<tr>
<td>Name</td>
<td>Foo</td>
</tr>
<tr>
<td>Value</td>
<td>Waka waka</td>
</tr>
....
</table>
</div>
When the user hovers over the link text FOO, I want the div and its content to become visible, floating near the mouse, I don't care if its above, below, left or right of the link text. It just needs to work. What is the simplest / best way to do this? I don't think I can use the title attribute of the link since I want to support an html table, is that correct? How do I do this?
Basic stuff, really. Here's a fiddle: http://jsfiddle.net/MqcMM/. The reason the table and the link are wrapped in a container is to allow hovering over the table once it is displayed.
HTML:
<div id = "container">
<a id="foo" href = "#">FOO</a>
<table>
<tr>
<td>Name</td>
<td>Foo</td>
</tr>
<tr>
<td>Value</td>
<td>Waka waka</td>
</tr>
</table>
</div>
CSS:
body {
padding: 50px;
}
#container {
position: relative;
display: table;
}
#container > table {
position: absolute;
white-space: nowrap;
border-collapse: collapse;
display: none;
}
#container > table td {
border: 1px dotted #000;
padding: 2px;
}
#container:hover > table {
display: table;
}
I need to create a html using a JSON Object. I'm able to create the table and print the result..For some reason, the table gets extends beyond the container table...
JavaScript:
$(document).ready(function(){
$('<div/>',{
'id':'tablecontainer'
}).appendTo('#maincontainer');
$('<div/>',{
'id':'tablecontainer-1'
}).appendTo('#maincontainer');
$('#maincontainer').append($('<div id="layout" />')
.append($('<table id="set"/>')
.append('<thead><tr> <th>Name</th><th>Age</th> <th>Sex</th> <th>DOB</th> <th>Date Enrolled </th> <th>Date Informed</th> <th>Email Id</th> </tr></thead>')))
var jsonobject = [
{'name':'Bob','age':'20','sex':'male','dob':'2012-12-01','dateenroll':'2012-01-01','dateinform':'2013-01-01','emailid':'bob#gmail.com'},
{'name':'Tom','age':'30','sex':'male','dob':'2012-12-01','dateenroll':'2012-01-01','dateinform':'2013-01-01','emailid':'Tom#gmail.com'},
{'name':'Mike','age':'40','sex':'male','dob':'2012-12-01','dateenroll':'2012-01-01','dateinform':'2013-01-01','emailid':'Mike#gmail.com'},
]
jsonobject.forEach(function(entry) {
$('#set').append();
trObj = $('<tr>');
trObj.append($('<td>').html(entry.name));
trObj.append($('<td>').html(entry.age));
trObj.append($('<td>').html(entry.sex));
trObj.append($('<td>').html(entry.dob));
trObj.append($('<td>').html(entry.dateenroll));
trObj.append($('<td>').html(entry.dateinform));
trObj.append($('<td>').html(entry.emailid));
$('#set').append(trObj);
/*$('#test').append('<b>' + entry.name + '</b>')*/
});
});
css:
#maincontainer{
background-color: black;
width:500px;
height:200px;
color: red;
}
#tablecontainer{
background-color:green;
width:500px;
height:200px;
}
#tablecontainer-1{
background-color:red;
width:500px;
height:200px;
}
#layout{
background-color:light-blue;
width:500px;
height:200px;
}
http://jsfiddle.net/7wkg4/4/
Quick look at the output
<div maincontainer> <-- height 200px
<div tablecontainer></div> <-- height 200px
<div tablecontainer-1></div> <-- height 200px
<div layout> <-- height 200px
<table set>
</div>
</div>
200 + 200 + 200 > 200
You are missing the closing </tr> tag inside jsonobject.forEach(function(entry) {
My mistake for this one. You don't need to close because you create jquery object directly
Try this instead:
Also, your <table> structure has <thead>, and after that you are appending <tr> nodes. You should create <tbody> inside the table, and append <tr> nodes inside the <tbody> tag
Consider this JSFiddle
When I mouseenter on Span1 , a blue bar should appear below the Span1 (same for Span2 and Span3)
But even I mouseenter on Span1 or Span2 or Span3 , blue bar appears only under Span2.
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:100px;
height:2px;
background-color:blue;
margin:0px auto;
display:block;
}
HTML
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
JS
$(document).ready(function(){
$('#span1').mouseenter(function(){
$('#Span1').addClass('under');
});
$('#span2').mouseenter(function(){
$('#Span2').addClass('under');
});
$('#span3').mouseenter(function(){
$('#Span3').addClass('under');
});
$('#span1').mouseleave(function(){
$('#Span1').removeClass('under');
});
$('#span2').mouseleave(function(){
$('#Span2').removeClass('under');
});
$('#span3').mouseleave(function(){
$('#Span3').removeClass('under');
});
});
You have no width on the cells before the hover
Working JSFiddle here: http://jsfiddle.net/F2smc/5/
div.demo div {
display:table-cell;
text-align:center;
width: 33%; // <<< Added this
}
Basically the other 2 cells are zero width so the second row collapses to something very narrow in the middle so it looks like it is only under option 2.
Better example: http://jsfiddle.net/F2smc/29/
You can get the same effect, without specifying an exact % width, by simply adding this CSS instead for the spans (so they do not collapse within their parent divs):
div.demo span
{
width:100%;
}
If you put unique colors on the divs it will become really obvious what is going on. 100% on the div does not mean the divs will use it like in a table. Basically any change that applies a width to the underlining divs/spans will work. Suggest you use Chrome in F12 debug mode to view this type of work as it clearly shows the original elements were all 0 width.
PS. Is really is a bad idea to use ids that vary only in case
On a separate note:
You would not normally hardwire events for each different id in JQuery when they all do roughly the same thing. If you change your ids to be really unique (not just by case) you can do something like:
$(document).ready(function () {
$('.menu').hover(function () {
$('#' + this.id + '-l').addClass('under');
}, function () {
$('span').removeClass('under');
});
});
Which takes the id of the current hovered item, appends something unique then updates the matching item by id.
Working demo: http://jsfiddle.net/F2smc/30/
That should clean things up while retaining your original structure.
For testing i have given text-decoration,you replace that with background-color..
HTML
<div class="demo">
<div id='one' class="hover">Span 1</div>
<div id='two' class="hover">Span 2</div>
<div id='three' class="hover">Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:auto;
height:1px;
text-decoration:underline;
margin:0px auto;
display:block;
}
JQuery
$(document).ready(function(){
$('.hover').hover(function(){
var id=$(this).attr("id");
$('#'+id).addClass('under');
},function(){
$('.hover').removeClass('under');
});
});
Working DEMO
Try this
I have editted your html and css
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<span id='Span1'></span>
<span id='Span2'></span>
<span id='Span3'></span>
</div>
and add this to your css
div.demo span {
display:table-cell;
width:100px;
}
or
Try this
Working DEMO
without changing any html and css
just add width:100px; to
div.demo div {
display:table-cell;
text-align:center;
width:100px;
}
Hope this helps,thank you
Below I am posting some code that I am using to try to set a table width to be fixed proportions for each column. 10% for one, 90% for the other.
Presently, I am inserting a dijit.Tree widget via javascript at the "treeOne" div tag. When this tree opens up, my column grows in width to accomodate. I would like for it to always be 10% wide no matter what, and stop resizing the column. What am I doing wrong?
<table width="100%" border="1">
<thead>
<tr>
<td style="overflow:hidden;width:10%;"> Tree</td>
<td style="width:90%;" > Query</td>
</tr>
</thead>
<tbody>
<td style="overflow:hidden;width:10%;">
<div id ="treeOne">Insert Tree here</div>
</td>
<td style="width:90%;">
.
.
.
Table cells are supposed to work like this, expanding to accommodate whatever's inside of them.
If you want it to be fixed in size (and chop off the contents in the process), try using CSS with divs instead:
<style type="text/css">
.col1 {
clear:both;
float:left;
overflow:hidden;
width:10%;
}
.col2 {
float:left;
width:90%;
}
</style>
<div class="col1">
<div id ="treeOne">Insert Tree here</div>
</div>
<div class="col2">...</div>