循环改变单元格背景色

查出来一个list用js实现循环改变单元格背景色，看起来成渐变的效果。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

如果是奇偶行
$('#tableName > tbody tr:even').css('background','red');
$('#tableName > tbody tr:odd').css('background','blue'); 如果是单击，类似于这样，把上次单击行的索引记下来和当前判断下，然后切换样式，也有其它方法用事件委托来做，不过这个稍微简单点
var preIndex=0;
$('#tableName > tbody tr').click(function(){
     if($(this).index()!=preIndex)
     {
      $(this).css('background','颜色1');
      $('#tableName > tbody tr:eq("+preIndex+")").css('background','颜色2');
      preIndex=$(this).index();
}
})
你说的渐变是隔行变色，还是什么
我写的这个是改变透明度<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("table").css("background-color","yellow");
$("#abv").click(function(){
$("table tr").each(function(i,j){
$(this).animate({opacity:1.0-i/10});
});
});
})
</script>
<input type="button" id="abv" value="测试用按钮"/>
<table  width="250" border="1" cellspacing="0" cellpadding="0" >
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head> <body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("table tr:even").css("background-color","yellow");

    })
</script>
<table  width="250" border="1" cellspacing="0" cellpadding="0" >
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
</table>
</body>
</html>
楼主的意思应该不是隔行变色，是一个列表从上到下逐渐变色，类似于背景色的意思吧。
<style>
.linear { width:130px; height:130px; border:2px solid black; padding: 10px;
           background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff));
           -webkit-background-origin: padding; -webkit-background-clip: content; }
</style>
<div class="linear"></div>
不是一个div的背景色渐变，是每一个td的背景色都不一样，看起来成渐变色。
提供一种思路,参考下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE> New Document </TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var $tds = $("#t").find('td');
$tds.each(function(index){
                // 根据RGB的值来渐变
$(this).css({'background-color':'RGB('+(index * 10)+',80,80)'});
});
}
</script>
<style>
td{
width:'50px';
height:'10px';
}
</style>
</HEAD><BODY>
<TABLE id="t">
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>