Mixing
How Can I apply CSS style to a selected row only?
I have a table built in PHP, style is even rows grey and odd rows white.
rows can be selected and un-selected, when a row is selected it turns blue,
now when I un-select it I want it to go back to original style, (right now I only managed to turn the row grey, but the original style is that only even rows are grey)
Function Selecting and unselecting rows:
gets a row, if a row is blue (eg. row is selected) it turns it grey, else: it turns it blue (e.g selects it)
<script>
var selected_sqf =0 ;
var selected_weight=0 ;
function myFunction(row,w) {
if(String(row.style.backgroundColor)=="rgb(30, 144, 255)")
{row.style.backgroundColor='#dddddd';
selected_sqf -= parseFloat((row.cells[10].innerHTML));
selected_weight -=parseFloat((row.cells[11].innerHTML));;
document.getElementById("selected_sqf").innerHTML = selected_sqf;
document.getElementById("selected_weight").innerHTML = selected_weight;
}
else {
row.style.backgroundColor='#1E90FF';
selected_sqf += parseFloat((row.cells[10].innerHTML));
selected_weight +=parseFloat((row.cells[11].innerHTML));;
document.getElementById("selected_sqf").innerHTML = selected_sqf;
document.getElementById("selected_weight").innerHTML = selected_weight;
//alert(row.style.backgroundColor)
}
}
</script>
Stlye:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 67%;
}
table, th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
javascript php css
edited Jan 1 at 8:40
Moshe Slavin
2,3263926
asked Jan 1 at 8:18
Manny Manny
314
add a comment |
I have a table built in PHP, style is even rows grey and odd rows white.
rows can be selected and un-selected, when a row is selected it turns blue,
now when I un-select it I want it to go back to original style, (right now I only managed to turn the row grey, but the original style is that only even rows are grey)
Function Selecting and unselecting rows:
gets a row, if a row is blue (eg. row is selected) it turns it grey, else: it turns it blue (e.g selects it)
<script>
var selected_sqf =0 ;
var selected_weight=0 ;
function myFunction(row,w) {
if(String(row.style.backgroundColor)=="rgb(30, 144, 255)")
{row.style.backgroundColor='#dddddd';
selected_sqf -= parseFloat((row.cells[10].innerHTML));
selected_weight -=parseFloat((row.cells[11].innerHTML));;
document.getElementById("selected_sqf").innerHTML = selected_sqf;
document.getElementById("selected_weight").innerHTML = selected_weight;
}
else {
row.style.backgroundColor='#1E90FF';
selected_sqf += parseFloat((row.cells[10].innerHTML));
selected_weight +=parseFloat((row.cells[11].innerHTML));;
document.getElementById("selected_sqf").innerHTML = selected_sqf;
document.getElementById("selected_weight").innerHTML = selected_weight;
//alert(row.style.backgroundColor)
}
}
</script>
Stlye:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 67%;
}
table, th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
javascript php css
edited Jan 1 at 8:40
Moshe Slavin
2,3263926
asked Jan 1 at 8:18
Manny Manny
314
2
Maybe you can try to add a className to the table row when the user select the item, and remove the className from the table row when the user select somewhere else. Then use that className to style the table row.
– Ray Chan
Jan 1 at 8:28
add a comment |
I have a table built in PHP, style is even rows grey and odd rows white.
rows can be selected and un-selected, when a row is selected it turns blue,
now when I un-select it I want it to go back to original style, (right now I only managed to turn the row grey, but the original style is that only even rows are grey)
Function Selecting and unselecting rows:
gets a row, if a row is blue (eg. row is selected) it turns it grey, else: it turns it blue (e.g selects it)
<script>
var selected_sqf =0 ;
var selected_weight=0 ;
function myFunction(row,w) {
if(String(row.style.backgroundColor)=="rgb(30, 144, 255)")
{row.style.backgroundColor='#dddddd';
selected_sqf -= parseFloat((row.cells[10].innerHTML));
selected_weight -=parseFloat((row.cells[11].innerHTML));;
document.getElementById("selected_sqf").innerHTML = selected_sqf;
document.getElementById("selected_weight").innerHTML = selected_weight;
}
else {
row.style.backgroundColor='#1E90FF';
selected_sqf += parseFloat((row.cells[10].innerHTML));
selected_weight +=parseFloat((row.cells[11].innerHTML));;
document.getElementById("selected_sqf").innerHTML = selected_sqf;
document.getElementById("selected_weight").innerHTML = selected_weight;
//alert(row.style.backgroundColor)
}
}
</script>
Stlye:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 67%;
}
table, th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
javascript php css
edited Jan 1 at 8:40
Moshe Slavin
2,3263926
asked Jan 1 at 8:18
Manny Manny
314
I have a table built in PHP, style is even rows grey and odd rows white.
rows can be selected and un-selected, when a row is selected it turns blue,
now when I un-select it I want it to go back to original style, (right now I only managed to turn the row grey, but the original style is that only even rows are grey)
Function Selecting and unselecting rows:
gets a row, if a row is blue (eg. row is selected) it turns it grey, else: it turns it blue (e.g selects it)
<script>
var selected_sqf =0 ;
var selected_weight=0 ;
function myFunction(row,w) {
if(String(row.style.backgroundColor)=="rgb(30, 144, 255)")
{row.style.backgroundColor='#dddddd';
selected_sqf -= parseFloat((row.cells[10].innerHTML));
selected_weight -=parseFloat((row.cells[11].innerHTML));;
document.getElementById("selected_sqf").innerHTML = selected_sqf;
document.getElementById("selected_weight").innerHTML = selected_weight;
}
else {
row.style.backgroundColor='#1E90FF';
selected_sqf += parseFloat((row.cells[10].innerHTML));
selected_weight +=parseFloat((row.cells[11].innerHTML));;
document.getElementById("selected_sqf").innerHTML = selected_sqf;
document.getElementById("selected_weight").innerHTML = selected_weight;
//alert(row.style.backgroundColor)
}
}
</script>
Stlye:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 67%;
}
table, th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
javascript php css
javascript php css
edited Jan 1 at 8:40
Moshe Slavin
2,3263926
asked Jan 1 at 8:18
Manny Manny
314
edited Jan 1 at 8:40
Moshe Slavin
2,3263926
asked Jan 1 at 8:18
Manny Manny
314
edited Jan 1 at 8:40
Moshe Slavin
2,3263926
edited Jan 1 at 8:40
Moshe Slavin
2,3263926
edited Jan 1 at 8:40
Moshe Slavin
2,3263926
2,3263926
asked Jan 1 at 8:18
Manny Manny
314
asked Jan 1 at 8:18
Manny Manny
314
asked Jan 1 at 8:18
Manny Manny
314
314
2
Maybe you can try to add a className to the table row when the user select the item, and remove the className from the table row when the user select somewhere else. Then use that className to style the table row.
– Ray Chan
Jan 1 at 8:28
add a comment |
2
Maybe you can try to add a className to the table row when the user select the item, and remove the className from the table row when the user select somewhere else. Then use that className to style the table row.
– Ray Chan
Jan 1 at 8:28
2
2
Maybe you can try to add a className to the table row when the user select the item, and remove the className from the table row when the user select somewhere else. Then use that className to style the table row.
– Ray Chan
Jan 1 at 8:28
Maybe you can try to add a className to the table row when the user select the item, and remove the className from the table row when the user select somewhere else. Then use that className to style the table row.
– Ray Chan
Jan 1 at 8:28
add a comment |
3 Answers
3
active
oldest
votes
I would suggest you add a class to the row when you select it, and style in css, instead of changing the background color programatically. This way, when you unselect the row you simple have to remove the class that you added beforehand and it will return to its original state. See the example below.
document.querySelector('#mytable').onclick = function(ev) {
var row = ev.target.parentElement;
if (row.classList.contains("blueel")) {
row.classList.remove("blueel");
} else {
row.classList.add("blueel");
}
}table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 67%;
}
table, th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr.blueel {
background-color: blue;
}<table id="mytable">
<tr>
<th>title 1</th><th>title 2</th><th>title 3</th>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
</table>answered Jan 1 at 8:40
Sergio SousaSergio Sousa
1013
add a comment |
Change this line:
if(String(row.style.backgroundColor)=="rgb(30, 144, 255)")
To this line:
if (row.getPropertyValue("background-color") =="rgb(30, 144, 255)")
window.getComputedStyle is a function that takes an element as a parameter and returns an object containing all of the styles that are being used on that object. We can then call getPropertyValue on the result to get the value of a css property.
Read more: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
answered Jan 1 at 8:30
A. MeshuA. Meshu
9072718
add a comment |
It's can be very simple, you just need to use toggleClass() method to add or remoov a style from your chosen tr tag line.
It's can be done easily wirh JQuery.
Try this: https://www.w3schools.com/jquery/html_toggleclass.asp
Goodluck!
answered Jan 1 at 8:57
YossiMYossiM
214
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53994010%2fhow-can-i-apply-css-style-to-a-selected-row-only%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
I would suggest you add a class to the row when you select it, and style in css, instead of changing the background color programatically. This way, when you unselect the row you simple have to remove the class that you added beforehand and it will return to its original state. See the example below.
document.querySelector('#mytable').onclick = function(ev) {
var row = ev.target.parentElement;
if (row.classList.contains("blueel")) {
row.classList.remove("blueel");
} else {
row.classList.add("blueel");
}
}table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 67%;
}
table, th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr.blueel {
background-color: blue;
}<table id="mytable">
<tr>
<th>title 1</th><th>title 2</th><th>title 3</th>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
</table>answered Jan 1 at 8:40
Sergio SousaSergio Sousa
1013
add a comment |
I would suggest you add a class to the row when you select it, and style in css, instead of changing the background color programatically. This way, when you unselect the row you simple have to remove the class that you added beforehand and it will return to its original state. See the example below.
document.querySelector('#mytable').onclick = function(ev) {
var row = ev.target.parentElement;
if (row.classList.contains("blueel")) {
row.classList.remove("blueel");
} else {
row.classList.add("blueel");
}
}table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 67%;
}
table, th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr.blueel {
background-color: blue;
}<table id="mytable">
<tr>
<th>title 1</th><th>title 2</th><th>title 3</th>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
</table>answered Jan 1 at 8:40
Sergio SousaSergio Sousa
1013
add a comment |
I would suggest you add a class to the row when you select it, and style in css, instead of changing the background color programatically. This way, when you unselect the row you simple have to remove the class that you added beforehand and it will return to its original state. See the example below.
document.querySelector('#mytable').onclick = function(ev) {
var row = ev.target.parentElement;
if (row.classList.contains("blueel")) {
row.classList.remove("blueel");
} else {
row.classList.add("blueel");
}
}table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 67%;
}
table, th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr.blueel {
background-color: blue;
}<table id="mytable">
<tr>
<th>title 1</th><th>title 2</th><th>title 3</th>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
</table>answered Jan 1 at 8:40
Sergio SousaSergio Sousa
1013
I would suggest you add a class to the row when you select it, and style in css, instead of changing the background color programatically. This way, when you unselect the row you simple have to remove the class that you added beforehand and it will return to its original state. See the example below.
document.querySelector('#mytable').onclick = function(ev) {
var row = ev.target.parentElement;
if (row.classList.contains("blueel")) {
row.classList.remove("blueel");
} else {
row.classList.add("blueel");
}
}table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 67%;
}
table, th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr.blueel {
background-color: blue;
}<table id="mytable">
<tr>
<th>title 1</th><th>title 2</th><th>title 3</th>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
</table>document.querySelector('#mytable').onclick = function(ev) {
var row = ev.target.parentElement;
if (row.classList.contains("blueel")) {
row.classList.remove("blueel");
} else {
row.classList.add("blueel");
}
}table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 67%;
}
table, th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr.blueel {
background-color: blue;
}<table id="mytable">
<tr>
<th>title 1</th><th>title 2</th><th>title 3</th>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
</table>document.querySelector('#mytable').onclick = function(ev) {
var row = ev.target.parentElement;
if (row.classList.contains("blueel")) {
row.classList.remove("blueel");
} else {
row.classList.add("blueel");
}
}table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 67%;
}
table, th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr.blueel {
background-color: blue;
}<table id="mytable">
<tr>
<th>title 1</th><th>title 2</th><th>title 3</th>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
</table>answered Jan 1 at 8:40
Sergio SousaSergio Sousa
1013
answered Jan 1 at 8:40
Sergio SousaSergio Sousa
1013
answered Jan 1 at 8:40
Sergio SousaSergio Sousa
1013
answered Jan 1 at 8:40
Sergio SousaSergio Sousa
1013
1013
add a comment |
add a comment |
Change this line:
if(String(row.style.backgroundColor)=="rgb(30, 144, 255)")
To this line:
if (row.getPropertyValue("background-color") =="rgb(30, 144, 255)")
window.getComputedStyle is a function that takes an element as a parameter and returns an object containing all of the styles that are being used on that object. We can then call getPropertyValue on the result to get the value of a css property.
Read more: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
answered Jan 1 at 8:30
A. MeshuA. Meshu
9072718
add a comment |
Change this line:
if(String(row.style.backgroundColor)=="rgb(30, 144, 255)")
To this line:
if (row.getPropertyValue("background-color") =="rgb(30, 144, 255)")
window.getComputedStyle is a function that takes an element as a parameter and returns an object containing all of the styles that are being used on that object. We can then call getPropertyValue on the result to get the value of a css property.
Read more: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
answered Jan 1 at 8:30
A. MeshuA. Meshu
9072718
add a comment |
Change this line:
if(String(row.style.backgroundColor)=="rgb(30, 144, 255)")
To this line:
if (row.getPropertyValue("background-color") =="rgb(30, 144, 255)")
window.getComputedStyle is a function that takes an element as a parameter and returns an object containing all of the styles that are being used on that object. We can then call getPropertyValue on the result to get the value of a css property.
Read more: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
answered Jan 1 at 8:30
A. MeshuA. Meshu
9072718
Change this line:
if(String(row.style.backgroundColor)=="rgb(30, 144, 255)")
To this line:
if (row.getPropertyValue("background-color") =="rgb(30, 144, 255)")
window.getComputedStyle is a function that takes an element as a parameter and returns an object containing all of the styles that are being used on that object. We can then call getPropertyValue on the result to get the value of a css property.
Read more: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
answered Jan 1 at 8:30
A. MeshuA. Meshu
9072718
answered Jan 1 at 8:30
A. MeshuA. Meshu
9072718
answered Jan 1 at 8:30
A. MeshuA. Meshu
9072718
answered Jan 1 at 8:30
A. MeshuA. Meshu
9072718
9072718
add a comment |
add a comment |
It's can be very simple, you just need to use toggleClass() method to add or remoov a style from your chosen tr tag line.
It's can be done easily wirh JQuery.
Try this: https://www.w3schools.com/jquery/html_toggleclass.asp
Goodluck!
answered Jan 1 at 8:57
YossiMYossiM
214
add a comment |
It's can be very simple, you just need to use toggleClass() method to add or remoov a style from your chosen tr tag line.
It's can be done easily wirh JQuery.
Try this: https://www.w3schools.com/jquery/html_toggleclass.asp
Goodluck!
answered Jan 1 at 8:57
YossiMYossiM
214
add a comment |
It's can be very simple, you just need to use toggleClass() method to add or remoov a style from your chosen tr tag line.
It's can be done easily wirh JQuery.
Try this: https://www.w3schools.com/jquery/html_toggleclass.asp
Goodluck!
answered Jan 1 at 8:57
YossiMYossiM
214
It's can be very simple, you just need to use toggleClass() method to add or remoov a style from your chosen tr tag line.
It's can be done easily wirh JQuery.
Try this: https://www.w3schools.com/jquery/html_toggleclass.asp
Goodluck!
answered Jan 1 at 8:57
YossiMYossiM
214
answered Jan 1 at 8:57
YossiMYossiM
214
answered Jan 1 at 8:57
YossiMYossiM
214
answered Jan 1 at 8:57
YossiMYossiM
214
214
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53994010%2fhow-can-i-apply-css-style-to-a-selected-row-only%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Maybe you can try to add a className to the table row when the user select the item, and remove the className from the table row when the user select somewhere else. Then use that className to style the table row.
– Ray Chan
Jan 1 at 8:28