We Keep Coding

How to conditionally change table row style during a v-for loop?

I am trying to change the background color of a table row, in a v-for loop, when the global.globalGroupLevel is 0 and if its not 0 then change it back. I know I could just duplicate the table row and use a v-if and a v-else, but that would look messy. I thought about using a ternary operator on the tr element to change the style, but not sure if that is possible and if it is then I don't know how.
My code at the moment part of the code is this
<tbody>
<template v-for="global in orderItems">
<tr>
... Bunch of code
</tr>
</template>
</tbody>
As mentioned, I could go with this...
<tbody>
<template v-for="global in orderItems">
<tr v-if="global.globalGroupLevel == 0" style='background: #ccc'>
... Bunch of code
</tr>
<tr v-else="global.globalGroupLevel != 0" style='background: white'>
... Bunch of code
</tr>
</template>
</tbody>
But that is messy and is to much for something as changing tr background color.
Do I have a better option in doing what I need to do?

You could use a solution with a class, like it was mentioned in another answer, or use :style as you were looking for:
:style="{ background: global.globalGroupLevel == 0 ? '#ccc' : 'white' }"

Create two classes called whitebg and graybg, and use class binding as follow :
<tr v-bind:class="{ global.globalGroupLevel == 0? 'graybg' : 'whitebg'}"></tr>
CSS rules:
.whitebg{
background:white
}
.graybg{
background:#ccc
}

As best practice I always try to avoid inline styles, and keep CSS in it's dedicated tag.
So you can add a class:
<tr :class="['gray-group', { 'white-group': global.globalGroupLevel }]"></tr>
And the css:
tr.gray-group {
background: #ccc;
}
tr.white-group {
background: white;
}
Also here is an working example: js fiddle

I want to use JQuery to Hide header row if the non-header row is only one

I want to use JQuery to Hide header row if the non-header row is only one.
And keep the header visible if there are multiple non-header rows after the header row.
i.e.
<tr class="header head1"></tr>
<tr class="non-header"></tr>
<tr class="non-header"></tr>
<tr class="header head2"></tr>
<tr class="non-header"></tr>
<tr class="header head3"></tr>
<tr class="non-header"></tr>
<tr class="non-header"></tr>
So I want to hide head2 because after that there is only one non-header row.

You could use the .filter() method to filter the .header elements based on whether there are more than two .non-header siblings elements until the next .header element.
Example Here
$('.header').filter(function () {
return $(this).nextUntil('.header').length < 2;
}).hide();

$('tr.header + tr.non-header + tr.header').prev().prev().hide();
Should get you there.
Also I don't think you have to make all your non-header rows of class non-header just for this. You could also just go with
$('tr.header + tr:not(.header) + tr.header').prev().prev().hide();

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.

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