Hide/Show HTML tables [closed] - javascript

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");
}
});
});

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>

Variable Table Inner components width not working html css

I am trying to build this excel table with html and css. The problem i kept facing is the when i try to add different number of columns for different rows, It surpasses the border limit and extends by itself. My intent is to replicate the contents of the picture.
table
{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 3px solid #151515;
}
th, td
{
border: 1px solid #151515;
padding: 12px;
text-align: center;
}
th
{
font-weight: bold;
}
tfoot tr:nth-child(2)
{
font-weight: normal;
height: 100px;
}
.colored td
{
background-color: #aaaaaa;
}
<table>
<tbody>
<tr>
<th colspan="4" class="title">PURCHASE DETAILS</th>
</tr>
<tr class="colored">
<th rowspan="2">BUDGET CODE:</th>
<td>Account Code</td>
<td>Cost Center</td>
<td>Project Code</td>
<td>DEA</td>
</tr>
<tr>
<td>5458</td>
<td>22222</td>
<td>3658954</td>
<td>95874</td>
</tr>
<tr>
<th>PO Number:</th>
<td>PO/SC/2010/33</td>
<th>Supplier:</th>
<td>STORM TECH</td>
</tr>
<tr>
<th>SOF:</th>
<td>00254584</td>
<th>Value (Purchase Price USD):</th>
<td><b>1,084.89</b></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Plan After Award Ends:</th>
<td colspan="2">Carry Over</td>
</tr>
</tfoot>
</table>
If anybody can assist please.

Not sure table layout is the best choice here, but it can be done. Just create more cells per row and span the cells you need over 2 or 3 "cells"
table
{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 3px solid #151515;
}
th, td
{
border: 1px solid #151515;
padding: 12px;
text-align: center;
}
th
{
font-weight: bold;
}
tfoot tr:nth-child(2)
{
font-weight: normal;
height: 100px;
}
.colored td
{
background-color: #aaaaaa;
}
<table>
<tbody>
<tr>
<th colspan="8" class="title">PURCHASE DETAILS</th>
</tr>
<tr class="colored">
<th rowspan="2">BUDGET CODE:</th>
<td colspan="2">Account Code</td>
<td colspan="2">Cost Center</td>
<td colspan="2">Project Code</td>
<td>DEA</td>
</tr>
<tr>
<td colspan="2">5458</td>
<td colspan="2">22222</td>
<td colspan="2">3658954</td>
<td>95874</td>
</tr>
<tr>
<th>PO Number:</th>
<td colspan="3">PO/SC/2010/33</td>
<th colspan="2">Supplier:</th>
<td colspan="2">STORM TECH</td>
</tr>
<tr>
<th>SOF:</th>
<td colspan="3">00254584</td>
<th colspan="2">Value (Purchase Price USD):</th>
<td colspan="2"><b>1,084.89</b></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Plan After Award Ends:</th>
<td colspan="6">Carry Over</td>
</tr>
</tfoot>
</table>

Toggle that reveal text one at a time by click

I have a problem with my code. The goal is to have a text that appear when a user click on the link. But I want also that when he clicks on the link the only text that show is the text underneath and not in all the cells. Can someone has a clue on what I did wrong? I will probable add other links (more than 2) and I want to be sure that it will work every time.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$('.cat' + $(this).attr('data-prod-cat')).toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>

You have just to go up to the parent table using closest('table') function and then select all the text's related to the current clicked .toggler using .find('[class^="cat"]') like :
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
Hope this helps.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td>
<a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>

Based on your code, I guess you are trying to use data-prod-cat attribute to know which block needs to appear.
But in both of your block you have data-prod-cat="1" which means that you will activate both blocks on every action.
Try changing the 2nd block attribute to :
data-prod-cat="2"
You'll also need to update the css class in your other <tr>

You need to get the parent of <a> first then get that parent which is <tr>. Finally filter on cat1 class to toggle all siblings containing the cat1 class.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).parent().parent().siblings().filter(".cat1").toggle();
});
});
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).parent().parent().siblings().filter(".cat1").toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>

Different width of column in the HTML table

I am trying to make the width of tds different in the HTML tale but I am unable to do so.
HTML Code
<table class="TFtable" border="1">
<tr>
<th >Heading1</th>
<th >Heading2</th>
<th >Heading3</th>
</tr>
<tr>
<td>Text jshdf hjkhsdk jhfkhds fkjhf sdjkh dsfkjh</td>
<td >Text</td>
<td >Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</table>
CSS
.TFtable {
width: 50%;
border-collapse: collapse;
table-layout: fixed;
}
.TFtable tr {
padding: 7px;
border: #4e95f4 1px solid;
}
/* provide some minimal visual accomodation for IE8 and below */
.TFtable tr {
background: #FFFFFF;
}
/* Define the background color for all the ODD background rows */
.TFtable tr:nth-child(odd) {
background: #FFFFFF;
}
/* Define the background color for all the EVEN background rows */
.TFtable tr:nth-child(even) {
background: #BCCECE;
}
.TFtable td{
table-layout: fixed;
width: 20px;
height:auto;
overflow: auto;
}
Link to JSFiddle.
Here

You can use this HTML Code to make different td`s width without using CSS
<table border="1" width="100%;">
<tr>
<th >Heading1</th>
<th >Heading2</th>
<th >Heading3</th>
</tr>
<tr>
<td width="20%">Text jshdf hjkhsdk jhfkhds fkjhf sdjkh dsfkjh</td>
<td width="30%">Text</td>
<td width="50%">Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</table>

Responsive Table not formatting after DIV Change/Load, until reszied

Example
Div Page
http://www.uller.com/dump/ajaxresponseissue/index.html
Source code, works fine if go direct
http://www.uller.com/dump/ajaxresponseissue/table.html
Displaying a table dynamically into a Div table has responsive script, however when the div is loaded the Script will not run until the window is rezised.
Trying to find a way to auto trigger the script on load of the div.
Below is code examples from that link.
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax Response Issuet</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<div id="output"></div>
<script>
// Function called by Period select
$(document).ready(function () {
$("#output").load("table.html #loadMeOnly");$.getScript('responsibe-tables.js');$.getScript('jquery.js');
});
</script>
</body>
</html>
called table js
<div id="loadMeOnly">
<style type="text/css">
table th { font-weight: bold; }
table td, table th { padding: 9px 10px; text-align: left; }
/* Mobile */
#media only screen and (max-width: 979px) {
table.responsive { margin-bottom: 0; }
.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
.pinned table { border-right: none; border-left: none; width: 100%; }
.pinned table th, .pinned table td { white-space: nowrap; }
.pinned td:last-child { border-bottom: 0; }
div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
div.table-wrapper div.scrollable table { margin-left: 35%; }
div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
}
</style>
<table width='100%' class="responsive">
<tr>
<th scope='col'> </th>
<th colspan='3' scope='col'><center>
Invited
</center></th>
<th colspan='2' scope='col'><center>
Accepted
</center></th>
<th colspan='2' scope='col'><center>
Confirmed
</center></th>
<th colspan='2' scope='col'><center>
Attended
</center></th>
<th scope='col'><center>
Sold
</center></th>
</tr>
<tr>
<th scope='col'>Name</th>
<th scope='col'>P</th>
<th scope='col'>G</th>
<th scope='col'>Total</th>
<th scope='col'>##</th>
<th scope='col'>%</th>
<th scope='col'>##</th>
<th scope='col'>%</th>
<th scope='col'>##</th>
<th scope='col'>%</th>
<th scope='col'>##</th>
</tr>
<tr>
<td> House</td>
<td onclick='document.location = "?Databuild&Account=28&Type=P";' style='cursor:pointer;'></td>
<td onclick='document.location = "?Databuild&Account=28&Type=G";' style='cursor:pointer;'>1</td>
<td onclick='document.location = "?Databuild&Account=28";' style='cursor:pointer;'>1</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>ss ss</td>
<td onclick='document.location = "?Databuild&Account=68&Type=P";' style='cursor:pointer;'>9</td>
<td onclick='document.location = "?Databuild&Account=68&Type=G";' style='cursor:pointer;'>32</td>
<td onclick='document.location = "?Databuild&Account=68";' style='cursor:pointer;'>41</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>xx xx</td>
<td onclick='document.location = "?Databuild&Account=70&Type=P";' style='cursor:pointer;'></td>
<td onclick='document.location = "?Databuild&Account=70&Type=G";' style='cursor:pointer;'>28</td>
<td onclick='document.location = "?Databuild&Account=70";' style='cursor:pointer;'>28</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>vv vv</td>
<td onclick='document.location = "?Databuild&Account=101&Type=P";' style='cursor:pointer;'>1</td>
<td onclick='document.location = "?Databuild&Account=101&Type=G";' style='cursor:pointer;'>28</td>
<td onclick='document.location = "?Databuild&Account=101";' style='cursor:pointer;'>29</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>yy yy</td>
<td onclick='document.location = "?Databuild&Account=136&Type=P";' style='cursor:pointer;'>2</td>
<td onclick='document.location = "?Databuild&Account=136&Type=G";' style='cursor:pointer;'>19</td>
<td onclick='document.location = "?Databuild&Account=136";' style='cursor:pointer;'>21</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td onclick='document.location = "?Databuild&Account=All&Type=P";' style='cursor:pointer;'>12</td>
<td onclick='document.location = "?Databuild&Account=All&Type=G";' style='cursor:pointer;'>108</td>
<td onclick='document.location = "?Databuild&Account=All";' style='cursor:pointer;'>120</td>
<td>0</td>
<td>0%</td>
<td>0</td>
<td>0%</td>
<td>0</td>
<td>0%</td>
<td>0</td>
</tr>
</table>
</div>

Categories

Resources