Table selected row css

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.

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/

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

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 tr tr:nth-child(even) < background-color: red>
tr.selected

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(); 
>);
>

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: <>
>);

hover
key=
classes=>
className=
>
className=
component=»th»
scope=»row»
>

Here’s a working version based on your sandbox:

Here’s a similar example, but using «selected» instead of «hover»:

This uses the following styles:

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

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

and changing the TableRow rendering to be:

  hover 
key= 
onClick=  setSelectedID(row.id); 
>> 
selected= 
classes=> 
className= 
>

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" 
> 
> 
>
>);

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

 
 
 
  
  

 
Detail 
13 
Data 
May 12, 2022, midnight 
Cloture 
May 9, 2022, 11:30 a.m. 
Data 
Data 
Data 
 
 
  
  

 
Detail 
13 
Data 
May 12, 2022, midnight 
Cloture 
May 9, 2022, 11:30 a.m. 
Data 
Data 
Data 
 
 
  
  

 
Detail 
13 
Data 
May 12, 2022, midnight 
Cloture 
May 9, 2022, 11:30 a.m. 
Data 
Data 
Data 

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

title 1
title 2
title 3
element
element
element
element
element
element
element
element
element
element
element
element

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

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.

class App extends React.Component < state = < selectedRow: -1 >; 
render() < return (  < return ( onClick= className=>  ); >)>
 
 
name
 
age
 
address
 
 
 
 
 
 ); > 
changeColor = selectedRow => e => < if (selectedRow !== undefined) < this.setState(< selectedRow >); > >;>
ReactDOM.render(, ]>/>, document.getElementById("app"));

.tableHover :hover < color: white; background-color: blue;>
.tableSelected

Источник

CSS Make table rows selectable

The following tutorial shows you how to use CSS to do «CSS Make table rows selectable».

CSS Style

The CSS style to do «CSS Make table rows selectable» is

tr:nth-child(odd) < background-color:#EAF2D3; > tr:nth-child(even) < background-color:#A7C942; > tr:hover < background-color:#89ae37; >

HTML Body

body> table> tbody> tr> td>test td>one  !-- w w w . d e mo 2 s . c o m --> tr> td>test td>two  tr> td>test td>three  tr> td>test td>four  tr> td>test td>five  tr> td>test td>six     

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> tr:nth-child(odd) < background-color : #EAF2D3; > tr:nth-child(even) < background-color : #A7C942; > tr:hover < background-color : #89ae37; > !-- w w w . d e m o 2 s . co m -->   body> table> tr> td>test td>one  tr> td>test td>two  tr> td>test td>three  tr> td>test td>four  tr> td>test td>five  tr> td>test td>six    

Related

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

CSS Make table rows selectable

The following tutorial shows you how to use CSS to do «CSS Make table rows selectable».

CSS Style

The CSS style to do «CSS Make table rows selectable» is

tr:nth-child(odd) < background-color:#EAF2D3; > tr:nth-child(even) < background-color:#A7C942; > tr:hover < background-color:#89ae37; >

HTML Body

body> table> tbody> tr> td>test td>one  !-- w w w . d e mo 2 s . c o m --> tr> td>test td>two  tr> td>test td>three  tr> td>test td>four  tr> td>test td>five  tr> td>test td>six     

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> tr:nth-child(odd) < background-color : #EAF2D3; > tr:nth-child(even) < background-color : #A7C942; > tr:hover < background-color : #89ae37; > !-- w w w . d e m o 2 s . co m -->   body> table> tr> td>test td>one  tr> td>test td>two  tr> td>test td>three  tr> td>test td>four  tr> td>test td>five  tr> td>test td>six    

Related

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

[CSS] Select First Row of Table

See the demo below. The first row is selected and styled.

table class="first-row"> tbody> tr> td>(1,1)td> td>(1,2)td> td>(1,3)td> td>(1,4)td> tr> tr> td>(2,1)td> td>(2,2)td> td>(2,3)td> td>(2,4)td> tr> tr> td>(3,1)td> td>(3,2)td> td>(3,3)td> td>(3,4)td> tr> tbody> table> 

table.first-row > tbody > tr:nth-of-type(1)  font-size: larger; color: red; > 

We use nth-of-type CSS selector to select the first tr of the table. If you want to select n-th row, change the number from 1 to n.

Tested on: Chromium Version 56.0.2924.76 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)

Источник

Coloring CSS Tables

The previous chapter covered how to change the basic styles of the table using CSS. In this chapter we are going to a give more styles to the tables using CSS. Once you create the structure of the table in the markup, its easy to adding a layer of style to customize its appearance.

CSS Table Background color

The CSS background-color property allows you to color background of a table, row and cells.

The above code color the background of each row as green color and foreground color as white.

Source Code

How to color specific row in a CSS Table

You can use the tr:nth-child(rownumber) to color a particular row in a table using CSS.

Above code select the 3 row from top (including table head row) and color background as green and foreground as white.

CSS Code

Applied this CSS code to the Example 1 HTML Table

How to color specific column in a CSS Table

You can give background color to specific column by suing td:nth-child(columnnumber) .

Above code color the first coloumn background color as Orange.

CSS Code

Applied this CSS code to the Example 1 HTML Table

How to color CSS Table cell only

The following source code shows how to color a particular cell in a table using CSS.

CSS Table Alternate row coloring

You can use tr:nth-child(rowOrder) to give alternating row color to a Table using CSS. The rowOrder must be «odd» or «even».

Above code color every even row order to background color as orange.

CSS Code

Applied this CSS code to the Example 1 HTML Table

For CSS table alternate column coloring you can use the CSS code like the following.

Above code color alternate column to Orange background.

CSS Table Color first column and first row

Using a simple technique, you can color the first row and first column of a CSS table.

Источник