jQuery单击表格行设定背景颜色简单介绍

当前位置：首页 > 代码实例 > html5 css3代码分类 > jQuery > jQuery单击表格行设定背景颜色简单介绍

当点击表格中的一行的时候，能够设置当前行的背景颜色，可能在实际应用中，这样的场景并不多，不过还是能够希望能够给大家带来一定的帮助，起到举一反三的效果，代码实例如下:

[ jQuery ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>点击当前行实现变换背景颜色效果-51前端</title>
<style type="text/css">
.selected{ 
  background:#FF6500; 
  color:#fff; 
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
  $("#mytable tr:gt(0)").click(function(){ 
    $(this).addClass("selected").siblings().removeClass("selected"); 
  })
})
</script> 
</head> 
<body> 
<table border="1" id="mytable">
<tr>
  <td>标题一</td>
  <td>标题二</td>
  <td>标题三</td>
</tr>
<tr>
  <td>51前端一</td>
  <td>51前端一</td>
  <td>51前端一</td>
</tr>
<tr>
  <td>51前端二</td>
  <td>51前端二</td>
  <td>51前端二</td>
</tr>
</table>
</body> 
</html>

代码描述：jQuery单击表格行设定背景颜色。jQuery单击表格行设定背景颜色简单介绍

下载全部收藏

130 173

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册