javascript - onclick 背景颜色改变

Question

如何使用更改 url 的单击事件更改表格行的背景颜色？我只想要页面加载新 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);