onclick 背景颜色改变答案

【问题标题】：onclick background color changeonclick 背景颜色改变
【发布时间】：2013-10-31 13:41:11
【问题描述】：

如何通过更改 url 的点击事件来更改表格行的背景颜色？我只想要页面加载新 url 的时间的新背景颜色，基本上是为了给用户反馈，在页面实际更改之前单击按钮或表格行。

【问题讨论】：

发布一些代码。告诉我们你尝试了什么？你能创造一个小提琴吗？
这是一个 CCS 的东西，而不是 javascript。看看这个问题：Highlight selected row using css
@shawnzhu 你需要Js或者如何将类分配给选定的行？
我无法理解您的问题。你想改变点击行的背景颜色吗？
是的，但不是永久的，只有在新页面加载之前。单击该行时，我会进入一个新页面。

【解决方案1】：

这是一种方法

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

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

jsfiddle sample

【讨论】：

【解决方案2】：

试试这个。

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

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

一旦它引导您到目标页面行背景将重置。

FIDDLE

【讨论】：

【解决方案3】：

我认为这就像在 ajax 调用或其他东西上显示加载动画。你可以试试jquery。如果表行有一个 ID 则

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

或者您可以在任何其他事件（例如按钮单击或链接单击等）上触发此功能...

查看Jquery change background color

【讨论】：

【解决方案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>

【讨论】：

【解决方案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);

【讨论】：