Get the background of the row in a table to change for a click?

How can I get the background of the row in a table to change colors when a proper click is performed by the user?

I tried this via the :active pseudoclass, but doesn't work as I want. For example, on a mobile device touch screen, as soon as the user touches the screen, the intersected row will change colors, even though it's not a click [a click being a short mouseDown+mouseUp combination].

Here's the table:

<table>
  <tbody>
    <tr>
      <td align="left" style="vertical-align: top;">
        <div class="GPBYFDEEB" 
          __gwtcellbasedwidgetimpldispatchingfocus="true" 
          __gwtcellbasedwidgetimpldispatchingblur="true">
          <div>
            <div class="GPBYFDEAB" tabindex="0" style="outline:none;" __idx="0" onclick="">
              <div class="GPBYFDECB" style="outline:none;" __idx="1" onclick="">
                <!-- finally this is me. -->
                <div class="tableRow"> 

Here's my css:

.tableRow {
    background-color: green;
}

.tableRow:active {
    background-color: red;
}

Is there a way to do this? (I'm using gwt to generate the above html, but don't think it matters here).

Just to be precise, what'd I'd like is for the background color of the row to change to red after an onclick event is hit. After a brief period, revert the background to its original color. I'm basically trying to reproduce the visual effect of clicking a list item on iOS or android native widgets. Thank you

Answers


This is how you do it in GWT: you attach a handler to your CellTable or DataGrid.

myTable.addCellPreviewHandler(new Handler<myObject>() {

    @Override
    public void onCellPreview(CellPreviewEvent<myObject> event) {
        if ("click".equals(event.getNativeEvent().getType())) {
           myTable.getRowElement(event.getIndex()).getStyle().setBackgroundColor("red");
        }
    });
}

If you don't like the way it looks (background color being different from border color), you can use this instead:

myTable.getRowElement(event.getIndex()).addClassName("redRow");

This way you can specify more rules in your redRow CSS class, like:

.redRow {
    background: red;
    border: 2px solid red;
}

When you do not need this color for your row, you just remove this class or use .getStyle().clearBackgroundColor(), if you prefer the former solution.


JavaScript makes it pretty straight-forward:

var rows = document.getElementsByClassName("tableRow"); //get the rows
var n = rows.length; //get no. of rows
for(var i = 0; i < n; i ++) {
    var cur = rows[i]; //get the current row;
    cur.onmousedown = function() { //when this row is clicked
        this.style.backgroundColor = "red"; //make its background red
    };
    cur.onmouseup = function() {
        this.style.backgroundColor = "green";
    }
}

If you have jQuery included, it's even simpler:

$(".tableRow").mousedown(function() {
     $(this).css("background-color", "red");
});

$(".tableRow").mouseup(function() {
     $(this).css("background-color", "green");
});

A little demo that uses the pure JavaScript version: little link. (I took the liberty to change the colors a bit!).


Changing styles on click is indeed something that requires javascript and that is not veryu difficult, as @Abody97 already demonstrated in his answer.

I think it is worth mentioning what the :active pseudo selector stands for, as you seem to be confused. Personnaly I think its name is pourly chosen, it would be much clearer if it was called :down or something. Cause that is exactly what it is. It targets the down state of a button or link.

Each link or button has 3 states: - default: no pseudo selector required. You could call this the 'up' state. - hover: targeted with the :hover pseudo selctor. Only usefull when working with the mouse, and triggered when the mouse is over the element (for modern browsers this is any element, not just a link or button) - active: this is the down state as I mentionned before. It is targeted by the :active pseudo selector. When using a mouse it is not realy that usefull cause it will only be triggered as long as the mouse button is held down. On a toutchscreen it is much more usefull cause it indicates the user tapped correctly.

I am not sure what the content of your table is going to be (your html snippet stops when it becomes interesting), but I think it is worth mentionning the :focus pseudo selector as well. This one gets triggerd when an element 'has focus'. It works only on input elements (input, textarea) or links (typicly only usefull when navigating with the keyboard). I believe this is the one you where after when you where trying to use the :active.

I set up a small example with the :focus here: http://jsfiddle.net/6tN6B/ Especially the last sample could be usefull for you. It can be done easier with js, but I am a big fan of using js only when it is absolutly nessecary, so non js users get the same experience on your site.


Need Your Help

HTML not getting changed after jQuery call is made successfully

php jquery ajax

I have a voting mechanism on the site. When people vote up or down, this code is called:

Streamwriter only writes a certain amount of bytes from a string list

c# list file-read

I have 27 csv files containing employee timesheet data with about 2000 lines of data in total, and is growing day by day.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.