onclick background color change

Question

How can I change the background color of a table-row with a click event that changes url? I only want the new background color for the time the page takes to load the new url, basically to give the user feedback that the button or table-row is clicked before the page actually changes.

Post some code. Show us what have you tried? Can you create a fiddle? — Satpal, Oct 31 '13 at 13:42
It's a CCS thing, not javascript. take a look at this question: [Highlight selected row using css](http://stackoverflow.com/questions/5154955/highlight-selected-row-using-css) — shawnzhu, Oct 31 '13 at 13:46
@shawnzhu you need Js or how to assign the class to the selected row? — DaniP, Oct 31 '13 at 13:48
I couldn't understand your question. You want to change the background color of a clicked row? — akinuri, Oct 31 '13 at 13:49
Yes, but not permanently, only untill the new page loads. The row takes me to a new page when its clicked. — jlodenius, Oct 31 '13 at 13:51

score 2 · Accepted Answer · answered Oct 31 '13 at 13:50

2

Here is one way of doing it

$('table tr').click(function(evt) {
    var row = $(evt.currentTarget);
    row.addClass("loading");

    setTimeout(function() {
         row.removeClass("loading");   
    }, 2000);
})

jsfiddle sample

answered Oct 31 '13 at 13:50

Rainer Plumer

3,693
2
24
42

score 1 · Answer 2 · answered Oct 31 '13 at 13:58

Try this.

var table = document.getElementById("theTable");

for (var i = 0; i<table.rows.length; i++) {
    table.rows[i].onclick = function () {
        this.style.background = "lavender";
    }
}

Once it directs you to target page row background will reset.

FIDDLE

score 0 · Answer 3 · edited May 23 '17 at 10:27

0

I think this is like showing a loading animation on an ajax call or something. You can try a Jquery. If the table row has an ID then

$('tablerow').click (function(){
         $('tablerow').css("background-color","red");
});

Or you can use to fire this function on any other events like button click or link click etc ...

Check this Jquery change background color

edited May 23 '17 at 10:27

Community

1
1

answered Oct 31 '13 at 13:48

Ranjith Siji

1,125
3
12
19

score 0 · Answer 4 · answered Oct 31 '13 at 13:50

plain javascript:

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        for (var i = 0; i < document.getElementsByTagName('tr').length; i++) {
            (function (a) {
                document.getElementsByTagName('tr')[a].addEventListener('click', function () {
                    document.getElementsByTagName('tr')[a].style.background = 'red';
                }, false);
            })(i);
        }
    }, false);
</script>

score 0 · Answer 5 · answered Oct 31 '13 at 13:57

FIDDLE: http://jsfiddle.net/83wBV/

HTML

<table id="tbl">
    <tr>
        <td>row 1 cell 1</td><td>row 1 cell 2</td>
    </tr>
    <tr>
        <td>row 2 cell 1</td><td>row 2 cell 2</td>
    </tr>
</table>

CSS

table, tr, td {
    border: solid 1px #444;
    border-collapse: collapse;
    color: white;
}

tr {
    background-color: #47F;
}

td {
    padding: 0 10px;
}

JS

function onClick(evt) {

    var el = evt.target;
    if (el.tagName.toLowerCase() == "td") 
        el = el.parentNode;

    el.style.backgroundColor = "#F74";

}



document.getElementById("tbl").addEventListener("click", onClick);

onclick background color change

5 Answers5