We Keep Coding

Change Div Class On Each Click

I am building Bootstrap HTML and PHP website. Basically I need a solution so that when a div is clicked on it changes color and adds some text.
I can do this however I need a solution so that it can be done 3 times, bronze, silver and gold in this instance.
Below is my JSFiddle which shows it working, it changes to bronze and inserts the text as it should however the second click will not work and the third click won't work.
https://jsfiddle.net/vvecu9qa/1/
Hope that makes sense,
Thanks in advance guys!
HTML
<table class="table table-bordered">
<tbody>
<tr>
<td>Name</td>
<td>Spin on a variety of body parts</td>
<td>Spin with control and body tension</td>
<td>Spin in a variety of shapes</td>
<td>Identify appropriate places to perform a spin</td>
</tr>
<tr>
<td>Jon Smith</td>
<td class="progress1"> </td>
<td class="progress2"> </td>
<td class="progress3"> </td>
<td class="progress4"> </td>
</tr>
</tbody>
CSS
.emerging {
background-color: #cd7f32;
color: #fff;
text-align: center;
}
.expected {
background-color: #c0c0c0;
color: #fff;
text-align: center;
}
.exceeding {
background-color: #ffd700;
color: #fff;
text-align: center;
}
JavaScript
$('.progress1').click(function(){
$(".progress1").removeClass("progress1");
$(this).addClass('emerging');
$(this).text('Emerging');
});
$('.emerging').click(function(){
$(".emerging").removeClass("emerging");
$(this).addClass('expected');
$(this).text('Expected');
});
$('.expected').click(function(){
$(".expected").removeClass("expected");
$(this).addClass('exceeding');
$(this).text('Exceeding');
});

change your script like this, it will work
$(document).on("click",'.progress1',function(){
$(".progress1").removeClass("progress1");
$(this).addClass('emerging');
$(this).text('Emerging');
});
$(document).on("click",'.emerging',function(){
$(".emerging").removeClass("emerging");
$(this).addClass('expected');
$(this).text('Expected');
});
$(document).on("click",'.expected',function(){
$(".expected").removeClass("expected");
$(this).addClass('exceeding');
$(this).text('Exceeding');
});
here is the updated fiddle link

Since you only have 3 scenarios, your approach is fine. However, a more intuitive approach would be to create an array and an index, then cycle through them. This way you would only need one click event instead of 1 per step.
Updated Fiddle Here
var classes = ['emerging', 'expected', 'exceeding'];
var index = 0;
$('.progress1').click(function(){
$(this).removeClass(); //Removes all classes
$(this).addClass(classes[index]);
$(this).text(classes[index]);
if(index == (classes.length - 1)) {
index = 0; //Reset index at end of array
} else {
index++; //Increment index if not at the end of array
}
});

Try this approach. I have used the data attribute to make it a bit cleaner.
https://jsfiddle.net/mvinayakam/m4q3rgrq/
<td class="progress" data-progress="base" ><span> <span></td>
The Javascript part
$('.progress').click(function(){
progressAttr=this.getAttribute('data-progress');
switch (progressAttr)
{
case "base":
this.setAttribute('data-progress',"emerging");
break;
case "emerging":
this.setAttribute('data-progress',"exceeding");
break;
}
});
The CSS
[data-progress="emerging"] {
/* Styles */
background-color: #cd7f32;
color: #fff;
text-align: center;
}
[data-progress="emerging"]:after {
content:"Emerging";
}

Hover td escapes background-color change from hover tr

I have a general class that I use for table rows which changes the background-color of it's td 's when they are hovered. I'm using it all over my application.
.enty-table {
&:hover > td {
background-color: lightblue;
}
}
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Min Length</th>
<th>Max Length</th>
<th>Min Value</th>
<th>Max Value</th>
<th>Regular Expr</th>
<th>Default Value</th>
</tr>
</thead>
<tbody>
<tr class="enty-table">
<!-- I want the hover on the folowing td to escape the hover effect added with enty-table class on tr -->
<td class="columnCategory">Business Fields</td>
<td><strong>new column1</strong></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr class="enty-table">
<td><strong>new column2</strong></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
</tbody>
</table>
Now, I have a special table (2 dimensional) where in the first column I have td 's with rowspan.
Eventually I want to get rid of background-color change when I hover the rowspan td:
When I hover on the Business Fields td the hover effect is applied for the new column1 row, but when I hover on the second row it is not applied on the td with rowspan. I'm want to fix that by removing the hover action from the first td.
How can I escape the hover effect on the rowspan td, but keep it for the table rows (the individual subrows - new column1 , new column2)?
Can it only be done from CSS?

You could use CSS :not() pseudo-class to ignore the <td> has rowspan attribute, then use CSS general sibling selectors to reset the background color of table cells, as follows:
.enty-table {
&:hover > td:not([rowspan]) {
background-color: lightblue;
}
& > td[rowspan]:hover ~ td {
background-color: #fff; /* Reset the background of next cells */
}
}
JSBin Demo.
Update
If using CSS :not() is not an option, you could reset the background-color of the first cell as follows:
.enty-table {
&:hover > td {
background-color: lightblue;
/* Reset the background color of td[rowspan] */
&[rowspan] {
background-color: #fff;
}
}
& > td[rowspan]:hover ~ td {
background-color: #fff; /* Reset the background */
}
}
JSBin Demo #2.
Basically what I need is when I hover that td there will be nothing applied on the tr
Actually, you're hovering the tr itself, not only that td (refers to td[rowspan])
Is it possible to go higher in the tree structure from CSS
CSS is cascading, there's no backward and/or parent selector (yet).
As a Pure CSS way, you could use pointer-events: none; on the td[rowspan] to prevent from triggering the mouse event on that element.
Working Demo #3.
Otherwise, you need to use JavaScript to change all table-cells on hovering each one excluding td[rowspan].
For instance:
$('.enty-table').children('td:not(td[rowspan])').hover(function() {
$(this).siblings(':not(td[rowspan])').addBack().addClass('hover');
}, function() {
$(this).parent().children('td').removeClass('hover');
});
Working Demo #4.

A couple of things you could do:
.enty-table {
& td:hover {
background-color: lightgrey;
}
}
.enty-table {
& tr:hover {
background-color: lightgrey;
}
}

Please try it. Use class tree and change style using selected object. It will work fine for all "TD"s using proper tree pattern.
$(document).ready(function(){
$(".enty-table tr td").hover(function(){
$(this).css("background-color","yellow");
});
$(".enty-table tr td").mouseout(function(){
$(this).css("background-color","lightgray");
});
});
http://jsfiddle.net/vDD5p/

Hiding elements in table causes columns to shift

In this example http://jsfiddle.net/bYAK4/ why does hiding a cell cause the whole column to shift over and what can I do to avoid this?
HTML
<table>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Hello</td>
<td><div class="hide">World</div></td>
</tr>
</table>
CSS
table {
width:400px;
}
JS
$(document).ready(function() {
$('.hide').slideUp();
});

Try with
$(document).ready(function() {
$('.hide').hide();
});
slideUp may causes the meshup and also give width to td like
table tr td{
width:200px;
}
See this DEMO
See this using slideUp DEMO2

Because you're essentially removing it from the dom, but not destroying it.
If you only want to hide it use:
$(document).ready(function() {
$('.hide').css('visibility', 'hidden');
});

It looks like jQuery is animating the width of the td, in either .slideUp() or even if you use .hide(1000).
Try adding width to the td instead of the table:
td { width: 200px; }
See fiddle. I added a border around the td so you can see what happens.

Disabled inputs in bootstrap. How to apply it to a different TAG?

By using disabled attribute on an input is possible to prevent user input and trigger a slightly different look.
Here is the demo http://jsfiddle.net/D2RLR/3023/
Let's suppose I want to apply the same style to a different TAG like a table.
In fact, I am using handsontable to generate an Excel-like data grid editor.
How can I apply disabled attribute in the following context (TAG like a table)?
Here is the demo using handsontable and bootstrap http://jsfiddle.net/D2RLR/3025/

You can't apply Bootstrap's existing input[disabled] styling, but you can add new CSS that mimics the styles exactly.
For example:
#exampleGrid td {
cursor: not-allowed;
background-color: #EEE;
color: #9E9999;
}
Obviously this doesn't include your readonly logic, and looks a little weird with your fiddle (because the column and row headers are the same color), but that's the gist of it.

Check here:
http://handsontable.com/demo/conditional.html
There is .readOnly cell property - use it!
HTML inputs also have readonly property, not only disabled property, an there are some considerable differences between their behaviour.

Boostrap is only styling the inputs based on their disabled attribute like:
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
background-color: #EEEEEE;
cursor: not-allowed;
}
So you won't be able to use bootstrap to do that, because tables don't have such attribute.
You should use a plugin of sorts or roll your own.

Maybe this can help... changes the look of the cell and you can edit on it.
HTML
<table class="editableTable">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>E-mail</th>
<th>Telephone</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>João Carlos</td>
<td>joca#email.com</td>
<td>(21) 9999-8888</td>
</tr>
<tr>
<td>002</td>
<td>Maria Silva</td>
<td>mariasilva#mail.com</td>
<td>(81) 8787-8686</td>
</tr>
<tr>
<td>003</td>
<td>José Pedro</td>
<td>zepedro#meuemail.com</td>
<td>(84) 3232-3232</td>
</tr>
</tbody>
</table>
CSS
* {
font-family: Consolas;
}
.editableTable {
border: solid 1px;
width: 100%
}
.editableTable td {
border: solid 1px;
}
.editableTable .editingCell {
padding: 0;
}
.editableTable .editingCell input[type=text] {
width: 100%;
border: 0;
background-color: rgb(255,253,210);
}
JS
$(function () {
$("td").dblclick(function () {
var originalContent = $(this).text();
$(this).addClass("editingCell");
$(this).html("<input type='text' value='" + originalContent + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("editingCell");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(originalContent);
$(this).parent().removeClass("editingCell");
});
});
});

Automatically add class with jQuery

<table>
<thead>
<tr>
<td>sf</td>
</tr>
<tr>
<td>sf</td>
</tr>
<tr>
<td>sf</td>
</tr>
<tr>
<td>sf</td>
</tr>
</thead>
</table>
.red {
background-color: red;
}
.green {
background-color: green;
}
How can i make automatically add class red and green for TR with jQuery?
LIVE EXAMPLE: http://jsfiddle.net/2Htwx/

$('tr:odd').addClass('red');
$('tr:even').addClass('green');​
Assuming you want every other row red or green, as per your JS-fiddle. Note that this is within each table, so you won't see red/green/red across ALL table rows.
If you want that, try this:
var oddFilter = function(index) {
console.log(index);
return (index % 2) == 1;
},
evenFilter = function(index) {
console.log(index);
return (index % 2) == 0;
}
$('tr').filter(oddFilter).addClass('red').end()
.filter(evenFilter).addClass('green');​
Note that <thead>, <tfoot> etc can still mess up the display, since that moves rows around the display.

You don't need JavaScript to accomplish this 'table-striping' effect. Use of the CSS nth-child selector will do the trick
thead tr {
background: green; /* Set all tr elements to green */
}
thead tr:nth-child(even) {
background: red; /* Override the colour for just the even ones */
}
Note: This selector is not supported in older browsers. IE8 and down.
Further reading on CSS nth-child:
http://css-tricks.com/how-nth-child-works/

You mean like this?
$(document).ready(function() {
var class = "";
$("tr").each(function(idx, elem) {
class = (idx % 2 == 0)?"red":"green";
$(elem).addClass(class);
});
});

Could you please explain "automatically"?
You mean at page ready event?
Maybe somthing like this:
$(document).ready(function (){
$("tr:odd").css("background-color", "#f00");
$("tr:even").css("background-color", "#0f0");
});

Here's the simplest method:
$("tr").addClass("red");

try this
var trs = jQuery('tr');
trs.filter(':even').addClass('red');
trs.filter(':odd').addClass('green');
to not selecting two-times every tr