onclick背景颜色变化

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

2013-10-31 Jacco

发表一些代码。告诉我们你试过了什么？你能创造一个小提琴吗？ – Satpal

这是一个CCS的东西，而不是JavaScript。看看这个问题：[突出选定的行使用CSS]（http://stackoverflow.com/questions/5154955/highlight-selected-row-using-css） – shawnzhu

@shawnzhu你需要Js或如何分配类选定的行？ – DaniP

这里是做的一个方式，

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

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

jsfiddle sample

来源

2013-10-31 13:50:46

谢谢，像这样的东西会在我的情况下工作 – Jacco

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

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

或者你可以使用火上的任何其它事件，如按钮点击此功能或链接点击等..

入住这Jquery change background color

来源

2013-10-31 13:48:24

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

来源

2013-10-31 13:50:23

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

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

来源

2013-10-31 13:57:30 fred02138

试试这个。

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

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

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

FIDDLE

来源

2013-10-31 13:58:29 akinuri

onclick背景颜色变化

回答

相关问题