Develop Reference

How to make expandable table cells hidden by default using jQuery/JavaScript, and click-able outside of a label?

I have this short piece of code that allows for sections of a table to be collapsed (they are like collapsible headers). This is neat, but I'm trying to make for the inverse to happen upon loading the page -- to be collapsed by default on load, but expandable when clicked. How would I go about doing this?
My present code, shown below, also features sections that only collapse when the words in the section are clicked, not when the section itself (outside of the words) are clicked. This is because I used labels to make the collapsible. Is there a way to make the entire row expandable/collapsible?
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial;
}
[data-toggle="toggle"] {
display: none;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tbody class="labels">
<tr>
<td colspan="2">
<label for="section">Click me!</label>
<input type="checkbox" id="section" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Jack</td>
<td>100</td>
</tr>
<tr>
<td>Jill</td>
<td>300</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function() {
$(this).parents().next('.hide').toggle();
});
});
</script>

I'm trying to make for the inverse to happen upon loading the page --
to be collapsed by default on load, but expandable when clicked. How
would I go about doing this?
Simply add a line in your jquery above your toggle function and call on your .hide class selector and use .hide(); Then when you click it the toggle function fires.
also features sections that only collapse when the words in the
section are clicked, not when the section itself (outside of the
words) are clicked. This is because I used labels to make the
collapsible. Is there a way to make the entire row
expandable/collapsible?
Yes... Make your label display as block in your CSS file...
label {
display: block;
}
$(document).ready(function() {
$('.hide').hide();
$('[data-toggle="toggle"]').change(function() {
$(this).parents().next('.hide').toggle();
});
});
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial;
}
[data-toggle="toggle"] {
display: none;
}
label {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tbody class="labels">
<tr>
<td colspan="2">
<label for="section">Click me!</label>
<input type="checkbox" id="section" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Jack</td>
<td>100</td>
</tr>
<tr>
<td>Jill</td>
<td>300</td>
</tr>
</tbody>
</table>

Several things going on here...
You were hiding your checkbox, which I don't think was your intent.
Check this example, where I fixed some things: https://jsfiddle.net/za73qf65/
Fixes include:
changing the name of your "hide" class to "hidable"
defaulting that "hidable" class to be display:none
unhiding your checkbox
changing your change() event handler to a click() (optional)
attaching your event handler to a button with an ID (you can vary that)
Point is, with my changes, your example works. You might want to tweak it for a more specific need.

Alternating Table Row Color Robust to display:none Settings

I have a dynamic table that I made with javascript. Depending on different user events, some rows will be hidden, rearranged, ect. To be more specific, I'm using display:none; to do this. The issue is the rows always keep their original background color (imagine if all the rows were visible, then you could see the alternating colors). That would be fine if I had the entire table visible, but like I mentioned, sometimes certain rows will be hidden or appear at different positions. This often results in two or more rows of the same color being stacked on top of each other.
There is a similar post:
Alternate table row color even if row is removed
I tried as many of those solutions as I could. However my problem persists. Probably due to the following reasons:
I'm not removing the columns, I'm simply setting display:none;
I'm not working in a jquery environment, so I am limited to native javascript solutions
My code is:
tr:nth-child(even) {
background:gray;
}
tr:nth-child(odd) {
background:lightgray;
}
I have tried tr:nth-of-type(odd) and many similar variants. Is there anything else in CSS or native javascript I can try?
More on Visbility/Selection:
CSS:
tr:not(.selected) {
display: none;
}
JS:
my_circles.each(function(d,i) {
if (my_bool===true) {
d3.select(this).classed('selected',true);
tableRows.get(this).classed("selected", true);
}
});
I'm using d3.js, but I think I will omit the d3 tag, because this seems more of a css or js issue. This is a small snippet, mostly for context, but essentially we should be able to infer the visibility is toggled by a class assignment. If you are curious, it is whenever the user selects a circle on my adjacent scatter plot.

Unfortunately, there is no straight-forward CSS only solution for this problem. Primarily because the :not selector does not go together with nth-... selectors.
Your best bet would be to re-stripe your rows everytime via Javascript.
Stripe your rows as soon as your page is loaded. After that, whenever you change display on any row, you fire your stripe function again.
Here is a crude example:
var tab = document.getElementById("tab"),
btns = tab.getElementsByTagName("a"),
show = document.getElementById("show"),
rows
;
stripe(); // Stripe the rows in beginning
// The stripe function itself
function stripe() {
// select all rows which are not hidden
rows = tab.querySelectorAll('tr:not(.hidden)');
// add a class for every second such row
for(var x = 0; x < rows.length; x++) {
if (x % 2 == 0) { rows[x].classList.add('alt'); }
else { rows[x].classList.remove('alt'); }
}
}
// dummy buttons to hide each row in this demo
[].forEach.call(btns, function(elem) {
elem.addEventListener('click', hide);
});
// your actual code where you hide your rows
function hide(e) {
e.target.parentNode.parentNode.classList.add('hidden');
stripe(); // fire re-striping when hiding rows
}
// dummy button to show rows in this demo
show.addEventListener('click', function(e) {
rows = tab.querySelectorAll('tr.hidden');
[].forEach.call(rows, function(row) {
row.classList.remove('hidden');
});
stripe(); // fire re-striping when showing rows
});
table { width: 70%; border: 1px solid gray; border-collapse: collapse; }
td { border: 1px solid gray; padding: 4px; }
tr.hidden { display: none; }
#tab tr.alt { background-color: #ddd;}
<table id="tab"><tbody>
<tr><td>Row 1</td><td>Hide</td></tr>
<tr><td>Row 2</td><td>Hide</td></tr>
<tr><td>Row 3</td><td>Hide</td></tr>
<tr><td>Row 4</td><td>Hide</td></tr>
<tr><td>Row 5</td><td>Hide</td></tr>
</tbody></table><br />
<a id="show" href="#">Show All</a>
Accompanying fiddle: https://jsfiddle.net/abhitalks/dz5aq5fk/
.

It is not a CSS or native JS solution but here is a d3 based solution. You could change classes of the rows every time the rows in your table change.
d3.selectAll("tr.selected").classed("grey",function(d,i){return i%2 == 0});
It adds the grey class to every second row and removes it from all the rest. Then you can color rows using css.
tr.grey {
background:gray;
}
tr:not(.grey) {
background:lightgray;
}
Here is a jsbin that shows this strategy in action.

this is not a perfect solution, but you can use gradient background in table to get desired result.
below is sample using gradient background in table.
tr:not(.selected) {
display: none;
}
table {
background-color: gray;
background-image: linear-gradient(transparent 50%, lightgray 50%);
background-size: 100% 36px;
}
<table width="500" cellpadding="0" cellspacing="0">
<tr class="selected">
<td>A</td>
<td>B</td>
</tr>
<tr class="selected">
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
<tr class="selected">
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
<tr class="selected">
<td>G</td>
<td>H</td>
</tr>
<tr class="selected">
<td>G</td>
<td>H</td>
</tr>
<tr class="selected">
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
</tr>
</table>

As you correctly pointed out, the reason that the css alternating stripes dont work is that your rows are remaining in place, and just being hidden using display:none.
The trick is to "group" the visible and hidden rows together so that we dont end up with un-event striping. Given that the order of your rows is not important, what we can do is move the hidden rows to either the top (using .insertBefore) or bottom (using .appendChild) of their containing parent. Something similar to this:
my_circles.each(function(d,i) {
if (my_bool===true) {
d3.select(this).classed('selected',true);
var row = tableRows.get(this);
row.parentNode.appendChild(row);
row.classed("selected", true);
}
});

jQuery: Run function if each tr has class

I have a table where trs are being assigned class with js.
I have another div that I want to reflect it on. However, my each() function doesn't seem to be working properly.
I have the following JS:
$("table.result tr").each(function() {
if($(this).hasClass("red")) {
$("#color").addClass("red");
//bunch of other things
} else {
$("#color").addClass("green");
//bunch of other things
}
});
And this is my markup:
<table class="result">
<tr class="red">
<th>Name</th>
<th>Result</th>
</tr>
<tr class="red">
<td>John Doe</td>
<td>Pass</td>
</tr>
<tr class="red">
<td>Johnathan Doe</td>
<td>Pass</td>
</tr>
<tr class="red">
<td>Jane Doe</td>
<td>Fail</td>
</tr>
</table>
<div id="color"></div>
What I'm trying to do is, if all the trs have a class of red, only then do I want the div to have the class of red too else it should be green. But the jQuery is only testing it on the last tr whether it has the class or not.
But it doesn't seem to be working. It's probably a very small mistake but I cannot figure it out. Here's a jsfiddle: https://jsfiddle.net/okvv330L/6/
As you can see, since one tr does not have the class red, the div should be green. But it's only checking the last tr and basing it on that.
Thanks!

This is because the original styling is overriding the style of the added class.
The easiest solution would be to add higher specficity like
.red, #color.red {
background: red;
}
Update
What I'm trying to do is, if all tr's have the class red, then give the div a class of red else give it green.
$(function() {
$("#color").addClass("green");
$("table.result:not(:has(tr:not(.red))) + #color").addClass("red");
});
#color {
height: 50px;
width: 50px;
background: #ccc;
}
.green,
#color.green{
background: green;
}
.red,
#color.red {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table class="result">
<tr class="red">
<th>Name</th>
<th>Result</th>
</tr>
<tr class="green">
<td>John Doe</td>
<td>Pass</td>
</tr>
<tr class="red">
<td>Johnathan Doe</td>
<td>Pass</td>
</tr>
<tr class="red">
<td>Jane Doe</td>
<td>Fail</td>
</tr>
</table>
<div id="color"></div>

It's working perfectly as it's adding the class .red in your div but it's just not taking the css as per the css specificity as id has greater specificity than class.
So, you may use:
#color.red{
background-color: #f00;
}
Or, you may use !important:
.red{
color: #f00 !important;
}
your jsfiddle
As per your comment, I have updated the fiddle. You may use like this:
$(function() {
if($("table.result tr.red").length == $("table.result tr").length) {
$("#color").addClass("red");
} else {
$("#color").addClass("green");
}
});

change your css.use important tag
.green {
background: green !important;
}
.red {
background: red !important;
}

Update: Since your want to assign the class red to #color only if all the trs has the class red
In that case using a loop will be wrong as it will always use the state of the last tr.
Also you have a problem with css specificity, where you have assigned a background color using ID property then that will have preference over the class rule you are assigning later, so you will have to make the class rule more specific by using a combination of the id rule and class rule.
$(function() {
var green = $("table.result tr").is(':not(.red)');
$("#color").toggleClass("green", green);
$("#color").toggleClass("red", !green);
});
#color {
height: 50px;
width: 50px;
background: #ccc;
}
.green,
#color.green {
background: green;
}
.red,
#color.red {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="result">
<tr class="red">
<th>Name</th>
<th>Result</th>
</tr>
<tr class="red">
<td>John Doe</td>
<td>Pass</td>
</tr>
<tr class="red">
<td>Johnathan Doe</td>
<td>Pass</td>
</tr>
<tr class="red">
<td>Jane Doe</td>
<td>Fail</td>
</tr>
</table>
<div id="color"></div>

I got this working by using the following code:
var $rowCount = $('.result tr').length;
var $rowFill = 0;
$(".result tr").each(function() {
if($(this).is('.red')) {
$rowFill = $rowFill + 1;
}
});
if($rowFill == $rowCount) {
$('#color').addClass('red');
} else {
$('#color').addClass('green');
}
Since the each() was only testing the last row; I got it to match the count with the number of rows. So now, it seems to work fine.

Is there a way to hide a data cell based on a specific value using just HTML/CSS?

For example I have this code:
<table>
<caption>Test</caption>
<tr>
<th>Values</th>
<td>$100</td>
</tr>
<tr>
<th>Initial value</th>
<td class="results"></td>
</tr>
</table>
Is there a way to hide the cells that are equal to $0 using HTML/CSS only?
Let's say instead of $0 I have a variable called fee that can be a variety of values: $0, $20, $100, etc.
For example:
<script>
var fees = ["$0", "$20", "$100"];
document.querySelector('.results').innerHTML = fees[1];
</script>
Is there a way to check what value it is and if it is found to be $0 can I then hide it?
My CSS is:
table{
border-width: 1px;
border-style: solid;
border-collapse: separate;
width: 400px;
}
#test{
empty-cells: show;
margin-bottom: 20px;
}
tr, th, td{
border-width:1px;
border-style: solid;
}
.results {
display: none; // I want this to only display none when fees = $0
}

TL;DR: It's possible. Look for the last solution in my answer, or check this blog:
Conditional formatting with pure css
I am assuming you do not want to hide the cell, but only its value. Hiding a cell does not make sense in a table since it would potentially change the layout, also any cell borders etc would also be hidden - probably not what you want.
Now CSS does not have any selectors based on element text content. But it does support attribute value selectors. So, you could change your code to be:
<table>
<caption>Test</caption>
<tr>
<th>Values</th>
<td><input value="$100"/></td>
</tr>
<tr>
<th>Initial value</th>
<td><input value="$0"/></td>
</tr>
</table>
And use a rule like
input[value="$0"] {
display: none;
}
You could even make the inputs not behave like inputs by adding a disabled attribute so they aren't editable.
If you don't want to use input elements, you could consider using spans instead and use a "data-value" attribute, and try if browsers respect that:
<table>
<caption>Test</caption>
<tr>
<th>Values</th>
<td><span data-value="$100">$100</span></td>
</tr>
<tr>
<th>Initial value</th>
<td ><span data-value="$0">$0</span></td>
</tr>
</table>
The css woudl be:
td > span[data-value="$0"] {
display: none;
}
Of course the drawback of this is that you would have to add the value twice (once as text content, once as attribute), and you need to generate an inner span element which feels a bit ugly.
Alternatively you could try to add a class attribute that includes the value and create a class selector:
<table>
<caption>Test</caption>
<tr>
<th>Values</th>
<td ><span class="value100">$100</span></td>
</tr>
<tr>
<th>Initial value</th>
<td ><span class="value0">$0</span></td>
</tr>
</table>
and the css would be:
td span.value0 {
display: none;
}
Of course the drawbacks are the same as with the previous method - you have to generate the value twice, once as text content and once as classname, and you need to add the inner span.
EDIT: dollar char is not valid in css classnames, so I removed it.
EDIT2: It turns out there is a way to do it without duplicating the value as both text and attribute. As a bonus, it turns out you don't need the inner span either if we rely on the :after pseudoclass (since it is that class that gets hidden, not the cell itself):
<table border="1">
<caption>Test</caption>
<tr>
<th>Values</th>
<td data-value="$100"></td>
</tr>
<tr>
<th>Initial value</th>
<td data-value="$0"></td>
</tr>
</table>
Using this css:
td:after {
content: attr(data-value);
}
td[data-value="$0"]:after {
content: "";
}

How to use single css class for multiple IDs?

I am trying to apply the following CSS to multiple divs under a given div ID.
.strikeout
{
background : blue;
}
I am using the following javascript code to change the color of the selected row in the grid,
$("#jqxGridInvoiceEntry").on("cellvaluechanged", function (event){
var rowindex = event.args.rowindex;
var checkboxState=event.args.value;
var rowTag=$("#row"+rowindex+"jqxGridInvoiceEntry div");
if(checkboxState==true)
{
rowTag.addClass("strikeout");
}
else
if(checkboxState==false)
{
rowTag.removeClass("strikeout");
}
});
See the screeshot below. When I select the checkbox in first row, its background color changes to blue. The problem is when I select the checkbox in second row, its background color changes blue but the previously selected row's background color disappears. The first row ID will be row0jqxGridInvoiceEntry and so on for subsequent rows.
I am using JQWidgets framework. The HTML code is,
<div style="float: left;" id="jqxGridInvoiceEntry"></div>

The only possibility, judging from the code you posted, is that the cellvaluechanged event also fires for the first row, perhaps because the checkbox in it is unchecked when you check the other checkbox in row 2.
This code:
else
if(checkboxState==false)
{
rowTag.removeClass("strikeout");
}
will remove the background color.

I think the way jquery implemented is little confusing. Here I am coming with different way of implementing the same result.
HTML
<table cellpadding="0" cellspacing="0" border="0" width="100%" id="MainTable">
<tr>
<td>First</td>
<td><input type='checkbox' /></td>
<td>Some INformation</td>
<td>Testing</td>
</tr>
<tr>
<td>Second</td>
<td><input type='checkbox' /></td>
<td>Some INformation</td>
<td>Testing</td>
</tr>
<tr>
<td>Third</td>
<td><input type='checkbox' /></td>
<td>Some INformation</td>
<td>Testing</td>
</tr>
</table>
CSS
table
{
border-top:1px solid #000;
border-right:1px solid #000;
}
table td
{
border-bottom:1px solid #000;
border-left:1px solid #000;
}
.green
{
background-color:green;
}
JQUERY
$('#MainTable input[type=checkbox]').on('click',function(){
$(this).parent().toggleClass('green').siblings().toggleClass('green');
});
Working JSFIDDLE Demo

.strikeout .otherdivClass .thirdCssClass {
background : blue; }

look to me like, your page is kind of reloaded when your callback is over.
if found this. they say you should use preventDefault() to forbid this behavior. hope it helps