onclick背景顏色變化

Question

如何通過更改url的click事件更改表格行的背景顏色？ 我只希望頁面加載新URL時使用新的背景色，基本上是為了向用戶提供在頁面實際更改之前單擊按鈕或表行的反饋。

Answer 1

這是一種方法

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

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

jsfiddle示例

Answer 2

嘗試這個。

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

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

一旦將您定向到目標頁面，行背景將被重置。

小提琴

Answer 3

我認為這就像在ajax調用中顯示加載動畫一樣。 您可以嘗試使用Jquery。 如果表格行具有ID，則

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

或者您可以使用它在其他任何事件（例如按鈕單擊或鏈接單擊等）上觸發此功能...

檢查此jQuery更改背景顏色

Answer 4

普通的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>

Answer 5

內容： 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);