Question

如何使用更改网址的点击事件更改表格行的背景颜色？我只想在页面加载新网址时使用新的背景颜色，基本上是为了向用户提供在页面实际更改之前点击按钮或表格行的反馈。

Answer 1

这是一种做法

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

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

jsfiddle sample

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";
    }
}

一旦它指向您的目标页面行背景将重置。

FIDDLE

Answer 3

我认为这就像在ajax调用上显示加载动画一样。你可以试试Jquery。如果表格行有ID，那么

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

或者你可以用它来点击按钮点击或链接点击等任何其他事件......

选中此Jquery change background color

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

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

onclick背景颜色变化

5 个答案: