点击背景颜色更改

onclick background color change

本文关键字：颜色 背景      更新时间：2023-09-26
如何使用

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

这是一种方法

$('table tr').click(function(evt) {
    var row = $(evt.currentTarget);
    row.addClass("loading");
    setTimeout(function() {
         row.removeClass("loading");   
    }, 2000);
})

JSFIDDLE 示例

试试这个。

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

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

小提琴

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

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

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

检查此 Jquery 更改背景颜色

纯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>

小提琴：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);
相关文章：