javascript - How Can I apply CSS style to a selected row only? - Stack Overflow

admin 管理员组

文章数量: 1086019

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;
}

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

Share Improve this question Follow edited Jan 1, 2019 at 8:40 Moshe Slavin 5,21455 gold badges2626 silver badges3939 bronze badges asked Jan 1, 2019 at 8:18 Manny Manny 8733 silver badges1414 bronze badges 1

• 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 Commented Jan 1, 2019 at 8:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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>

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/en-US/docs/Web/API/Window/getComputedStyle

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./jquery/html_toggleclass.asp

Goodluck!

本文标签： javascriptHow Can I apply CSS style to a selected row onlyStack Overflow