Css: Set Color for Selected Row in a Table

CSS: set color for selected row in a table

In order to add a .selected class to your clicked row you need a bit of JavaScript.

Example http://jsfiddle.net/thebabydino/KzVfy/

I used jQuery for the example, so there is very little code:

$("tr").click(function(){
    $(this).addClass("selected").siblings().removeClass("selected");
});​

Of course, it can be done without using any library if you don't wish to include jQuery.

Just for variation, I did another version. This one uses no library (no jQuery, no Mootools, no YUI, no Dojo, and so on...) and selects multiple rows. Can be seen at http://jsfiddle.net/thebabydino/nY5jj/ with a variation that unselelects a selected row when clicking on it again http://jsfiddle.net/thebabydino/nY5jj/1/

The JavaScript is:

var trs = document.querySelectorAll("tr");
for(var i = 0; i < trs.length; i++){
    trs[i].addEventListener("click", function(){this.className += " selected";});
}​

To unselect a selected row when clicking on it a second time :

var trs = document.querySelectorAll("tr");
for(var i = 0; i < trs.length; i++){
    trs[i].addEventListener("click", function(){
        var cn = this.className, thc = " selected", start_idx = cn.indexOf(thc);
        if(start_idx == -1) cn += thc;
        else cn = cn.replace(thc,"");
        this.className = cn;
    });
}​

CSS paint the table row when selected in a different color, (2 colored table)

You should refer to your class name exactly like you refer to your :nth-child selector.

Change .selected to tr.selected and its work fine, look at this example:

tr:first-child {background: green }tr {background: blue  }tr:nth-child(even) { background-color: red}
tr.selected {    background-color:black;    color:white;}
<table><tr>  <td>1</td>  <td>2</td></tr><tr>  <td>1</td>  <td>2</td></tr><tr>  <td>1</td>  <td>2</td></tr><tr class="selected">  <td>1</td>  <td>2</td></tr></table>

Angular - Change BackGround Color of Row in Table After click the Buttom

You can add an attribute to your component class and call it selectedRow, which will get the data.id. 

selectedRow: number; 

delete(postId,numeroDeposito) {
this.selectedRow = postId; 
const ans = confirm('TEXT TEXT '+dataid);
if (ans) {
  this.dataService.deleteData(postId).subscribe((data) => {
    if(data) {
      this.showSuccessDelete();
    } else {
      this.showError();
    }
    this.isSelected=false;
    this.loadDatas();
  });
}

}

then in the tr tag use [ngClass]="{'data-selected': selectedRow === data.id}".

How to change the text color of the selected row in material ui table

The background color is controlled in TableRow. In order to get the correct specificity (you shouldn't ever need to leverage "!important" when overriding Material-UI styles), you need to leverage the "hover" class similar to what is done within TableRow.

The color is controlled in TableCell, so that is the level where you need to control it.

For a working solution, in the styles you would have something like:

const styles = theme => ({
  tableRow: {
    "&$hover:hover": {
      backgroundColor: "blue"
    }
  },
  tableCell: {
    "$hover:hover &": {
      color: "pink"
    }
  },
  hover: {}
});

then in the rendering:

            <TableRow
              hover
              key={row.id}
              classes={{ hover: classes.hover }}
              className={classes.tableRow}
            >
              <TableCell
                className={classes.tableCell}
                component="th"
                scope="row"
              >
                {row.name}
              </TableCell>

Here's a working version based on your sandbox:

Edit Table hover colors

Here's a similar example, but using "selected" instead of "hover":

https://codesandbox.io/s/llyqqwmr79

This uses the following styles:

const styles = theme => ({
  tableRow: {
    "&$selected, &$selected:hover": {
      backgroundColor: "purple"
    }
  },
  tableCell: {
    "$selected &": {
      color: "yellow"
    }
  },
  selected: {}
});

and some state:

 const [selectedID, setSelectedID] = useState(null);

and changing the TableRow rendering to be:

            <TableRow
              hover
              key={row.id}
              onClick={() => {
                setSelectedID(row.id);
              }}
              selected={selectedID === row.id}
              classes={{ selected: classes.selected }}
              className={classes.tableRow}
            >

v4 of Material-UI will include some changes that should make overriding styles considerably easier (and easier to figure out how to do successfully without looking at the source code).

In v4 of Material-UI, we can use the global class names for the selected state ("Mui-selected") and for TableCell ("MuiTableCell-root") and then we only need to apply a single class to TableRow:

const styles = (theme) => ({
  tableRow: {
    "&.Mui-selected, &.Mui-selected:hover": {
      backgroundColor: "purple",
      "& > .MuiTableCell-root": {
        color: "yellow"
      }
    }
  }
});

Edit Table hover colors (forked)

Color table's row on click using Javascript and CSS

You can reach your object with few lines like:

function selectRow() {
  var table = document.getElementById("myTable");
  [...table.rows].forEach(el => {
    el.addEventListener('click', () => {
      el.classList.toggle('selected-row');
    });
  });
}

selectRow();
.table-row {
  cursor: pointer;
}

.selected-row {
  background-color: #FFD200 !important;
  color: white;
}
<table id="myTable">
  <tr class="table-row">
    <td style="border-bottom: 1px solid black;">
      <a style="color: #ff0000; text-align: center;" href="/action/13/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
      <a style="color: #3CB4E6; text-align: center;" href="/action/13/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
      <br>
      <a style="; text-align: center;" href="/action/13/">Detail</a>
    </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">13</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 12, 2022, midnight</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Cloture</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 9, 2022, 11:30 a.m. </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
  </tr>
  <tr class="table-row">
    <td style="border-bottom: 1px solid black;">
      <a style="color: #ff0000; text-align: center;" href="/action/13/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
      <a style="color: #3CB4E6; text-align: center;" href="/action/13/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
      <br>
      <a style="; text-align: center;" href="/action/13/">Detail</a>
    </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">13</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 12, 2022, midnight</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Cloture</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 9, 2022, 11:30 a.m. </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
  </tr>
  <tr class="table-row">
    <td style="border-bottom: 1px solid black;">
      <a style="color: #ff0000; text-align: center;" href="/action/13/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
      <a style="color: #3CB4E6; text-align: center;" href="/action/13/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
      <br>
      <a style="; text-align: center;" href="/action/13/">Detail</a>
    </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">13</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 12, 2022, midnight</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Cloture</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 9, 2022, 11:30 a.m. </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
  </tr>
</table>

How Can I apply CSS style to a selected row only?

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>

How to change color of selected row on onmousedown event

The function name is wrong its Highlight not HighLight

To pass the id of the element on function call you cannot just pass any variable(e in your case). Use this.getAttribute('id') to get the id.

In the each() the argument elem represented the index of the element and not the element itself. Introduce another argument for index.

function Highlight(id) {  var rows = $('#tbl > tbody > tr').each(function(i,elem) {    elem.style.background = 'green';  })  var tr = document.getElementById(id);  tr.style.background = 'red';}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="tbl">  <tr id="tr1" style="background-color:aquamarine" onmousedown="Highlight(this.getAttribute('id'))">    <td>      v1    </td>  </tr>  <tr id="tr2" style="background-color:aquamarine" onmousedown="Highlight(this.getAttribute('id'))">    <td>      v2    </td>  </tr>  <tr id="tr3" style="background-color:aquamarine" onmousedown="Highlight(this.getAttribute('id'))">    <td>      v3    </td>  </tr></table>

How to change the selected table row background color with React

You can maintain a selectedRow in the state and add a class name to the row based on matching index.

className={this.state.selectedRow === i ? "tableSelected" : "" }

Full working code below

class App extends React.Component {  state = {    selectedRow: -1  };
  render() {    return (      <table>        <thead>          <tr>            <th>name</th>            <th>age</th>            <th>address</th>          </tr>        </thead>        <tbody className="tableHover">          {this.props.students.map((item, i) => {            return (              <tr key={i} onClick={this.changeColor(i)} className={this.state.selectedRow === i ? "tableSelected" : "" }>                <td>{item.name}</td>                <td>{item.age}</td>                <td>{item.address}</td>              </tr>            );          })}        </tbody>      </table>    );  }
  changeColor = selectedRow => e => {    if (selectedRow !== undefined) {      this.setState({ selectedRow  });    }  };}
ReactDOM.render(<App students={[{name: "a"}, {name: "b"}]}/>, document.getElementById("app"));
.tableHover :hover {  color: white;  background-color: blue;}
.tableSelected {  background-color: blue;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="app"></div>

Related Topics

Data-Uri's and Caching

Why Is <Table> Content Extending Beyond Containing Bootstrap "Span" and Overlapping, at Some Resolutions

Transparent Background Image

Why Not Use Margin Positioning Instead of Using Position:Relative Top 5Px

How to Toggle Two CSS ':Checked' Pseudo-Classes with One Click

Css: How to Target ::Slotted Siblings in Shadow Dom Root

Sass Mixin Error for Ie Specific Filters Like -Ms-Filter

Internet Explorer 11 and Supported Web Fonts

Twitter Bootstrap Remove Table Row Highlight with Row Stripes

How Often Is the Default Font Size in the Browser Not 16Px

Use of "Text-Decoration-Color" Is Not Working

Using SCSS as Default Style Sheet in Angular 6+ (Styleext)

Input Padding Cutting Out Text in Firefox

Sass: Unicode Escape Is Not Preserved in .CSS File

Jquery Mobile Textarea: How Does It Use 'Rows' Attribute

Preventing Browser Text Input Suggestions

What Does \ Mean in a CSS Hex Color Notation

Aligning <Li> Next to Each Other, Not Working


Leave a reply



Submit