CODEWITHSUNDEEP
javascripthtmlcss
jlodenius
jlodenius

Reputation: 829

onclick background color change

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.

Upvotes: 0

Views: 2401

Answers (5)

akinuri
akinuri

Reputation: 12029

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

Upvotes: 1

fred02138
fred02138

Reputation: 3361

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

Upvotes: 0

Rainer Plumer
Rainer Plumer

Reputation: 3753

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

Upvotes: 2

Vicky Gonsalves
Vicky Gonsalves

Reputation: 11707

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>

Upvotes: 0

Ranjith Siji
Ranjith Siji

Reputation: 1135

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

Upvotes: 0

Related Questions