We Keep Coding

Whole table row clickable except the button with Javascript/jQuery

I have a simple table and I write some JS code in order to achieve that whole tr become a data-href. Everything works very nice except for one thing.
Now the whole row is clickable and that is fine, but there is a small issue, if you click on the delete button, it takes you to the update page (data-href), and I want to avoid that. So my question is how can I modify that code for the whole row to stay clickable except that delete button?
Here is my code:
$("tr").each(function() {
const $tr = $(this);
$tr.attr("data-href", $tr.find("a").attr("href"))
})
$('*[data-href]').on('click', function() {
window.location = $(this).data("href");
});
.modal {
padding:5px;
background-color:red;
color:#fff;
cursor: pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td> Age</td>
<td>
Update
<a data-toggle="modal" class="modal" data-target="#deleteModal">Delete</a>
</td>
</tr>
</table>
Can somebody try to help me with this?

To achieve this you can use the is() method to determine what element within the tr was clicked on. If it was an a element then you can prevent the window.location from being updated.
Also note that you can update the data-href of each tr using an implicit loop which makes the code slightly more succinct. Try this:
$('tr').attr('data-href', function() {
return $(this).find('a').attr('href');
});
$('*[data-href]').on('click', function(e) {
if (!$(e.target).is('a')) {
window.location.assign($(this).data("href"));
}
});
.modal {
padding: 5px;
background-color: red;
color: #fff;
cursor: pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>Age</td>
<td>
Update
<a data-toggle="modal" class="modal" data-target="#deleteModal">Delete</a>
</td>
</tr>
</table>

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

contenteditable change background color after edit

I am trying to build a spreadsheet-like application and using a table <td> with a tag contenteditable = "true" and I want the background color of the cell to be changed after it was changed.
From my research I figured I would need javascript or jquery to do so, however I know very little of it. Where do I start? So far I have figured how to change color when the cell is being edited. thank you!
<td contenteditable="true" >
<style>
[contenteditable="true"]:focus {
background-color: yellow;
}
</style>
"Stuff"
</td>

So I see you figured out how to change color when the cell is being edited. Now to change the cell after its done being edited you can use the following example.
jQuery has a function called focusout which triggers when the element loses focus from the user. It will then add the class orange which will change the background to orange.
$( document ).ready(function() {
$("td").focusout(function(){
$(this).addClass("orange");
});
});
td[contenteditable="true"]:focus {
background-color: yellow;
}
.orange{
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td contenteditable="true" >"Stuff"</td>
</table>
Here is a fiddle to play with: https://jsfiddle.net/8zbrxwpz/

Use td[contenteditable="true"] selector, and add the table parent as well.
td[contenteditable="true"]:focus {
background-color: yellow;
}
<table>
<td contenteditable="true" >"Stuff"</td>
</table>
https://jsfiddle.net/kasyzytr/

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.

change table alternative rows colors using jquery?

I have to change colors for alternative rows. one row in "Green" and another one is in "Yellow".
<tr class="ms-viewheader" vAlign="top">
<tr class="">
<tr class="ms-alternating">
<tr class="">
<tr class="ms-alternating">
<tr class="">
<tr class="ms-alternating">
<tr class="">
<tr class="ms-alternating">
I have to skip "ms-viewheader" row and start coloring next sibling. Full row should be in
color.
How to do this?

run something like this in javascript
// define the background color for even and odd rows
var bgColors = {
even: '#eaeaea',
odd: '#aeaeae'
};
$("table tr:not(.ms-viewheader):even").css({"backgroundColor":bgColors.even});
$("table tr:not(.ms-viewheader):odd").css({"backgroundColor":bgColors.odd});

Ok, so you want to just handle this one table. Try this:
$("table[class='ms-listviewtable'] tr[class='']").css("background-color","yellow");
$("table[class='ms-listviewtable'] tr:.ms-alternating").css("background-color","green")
I am assuming that the table has a class, otherwise you could add a class to it to differentiate it.
Demo:
http://jsfiddle.net/J7dVX/13/

Does it have to use JS? Here's a CSS solution.
http://jsfiddle.net/HvLRs/1/
CSS:
tr:nth-child(2n) {
background-color:green;
}
tr:nth-child(4n) {
background-color:yellow;
}
HTML:
<table id="alternating">
<th class="ms-viewheader" vAlign="top"><td>Header</td></th>
<tr class=""><td>1</td></tr>
<tr class="ms-alternating"><td>2</td></tr>
<tr class=""><td>3</td></tr>
<tr class="ms-alternating"><td>4</td></tr>
<tr class=""><td>5</td></tr>
<tr class="ms-alternating"><td>6</td></tr>
<tr class=""><td>7</td></tr>
<tr class="ms-alternating"><td>8</td></tr>
</table>
If you must use jQuery, I modified Teddy's code: http://jsfiddle.net/HvLRs/3/
$("table tr:.ms-alternating:even").css("background-color","yellow");
$("table tr:.ms-alternating:odd").css("background-color","green");

If you want to treat ms-viewheader the same as ms-alternating:
$('tr:not([class^="ms"])').css('background-color','red');
$('tr[class^="ms"]').css('background-color','blue');
otherwise, if you just want to skip ms-viewheader and start alternating all the other rows:
$('tr:not([class^="ms"])').css('background-color','red');
$('tr.ms-alternating').css('background-color','blue');
Proof of concept: http://jsfiddle.net/daybreaker/J7dVX/

If you need to do it dynamically, use:
$("tr[class='']").css("background-color", "green");
$(".ms-alternating").css("background-color", "yellow");
As an alternative you could also use:
$(".ms-viewheader").siblings().css("background-color", "green");
$(".ms-alternating").css("background-color", "yellow");

Something like this - use modulus
for row, i in $('tbody tr')
color = if i % 2 is 0 then '#ff0000' else '#00ff00'
$(row).css 'background-color', color

I see in your latest comment on the original question that the ms-alternating class is already there in the markup for you??
If so, you shouldn't need any jquery or fancy CSS3 rules to do this. You can do this with regular ol' CSS.
Just add this to your CSS:
tr td {
background-color:green; /* this colors the whole table green */
}
tr.ms-viewheader td {
background-color:transparent; /* we don't want the header to get any color, so reset it */
}
tr.ms-alternating td {
background-color:yellow; /* and finally, color the alternating rows yellow */
}
Please note, this will color all tables on the page. You probably only want to target a single table. So you need some more specific selectors. Does the table you want to color have an ID or class on it you could target?
Good luck!