循环改变单元格背景色

凤楚离歌 2013-04-20 08:43:09

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

...全文

175 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

KK3K2005 2013-04-22

打赏
举报

枚举单元格根据枚举的属性值设置单元格的颜色

凤楚离歌 2013-04-22

打赏
举报

引用 5 楼 waiting593 的回复:

楼主的意思应该不是隔行变色，是一个列表从上到下逐渐变色，类似于背景色的意思吧。 XML/HTML code?123456<style>.linear { width:130px; height:130px; border:2px solid black; padding: 10px; background: -webkit-gradient(line……

不是一个div的背景色渐变，是每一个td的背景色都不一样，看起来成渐变色。

凤楚离歌 2013-04-22

打赏
举报

引用 4 楼 licip 的回复:

<!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=……

不是隔行变色，是每一个td的背景色都不一样，看起来成渐变色。

凤楚离歌 2013-04-22

打赏
举报

引用 1 楼 ILOVE_ASPNET 的回复:

举个你要实现效果的例子，是初始化奇偶行变色，还是单击的时候变色？

不是隔行变色，是每一个td的背景色都不一样，看起来成渐变色。

NANU-NANA 2013-04-22

打赏
举报

grid renderer

猿敲月下码 2013-04-22

打赏
举报

提供一种思路,参考下

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

ILOVE_ASPNET 2013-04-20

打赏
举报

如果是奇偶行 $('#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(); } })

ILOVE_ASPNET 2013-04-20

打赏
举报

举个你要实现效果的例子，是初始化奇偶行变色，还是单击的时候变色？

UEAnswer 2013-04-20

打赏
举报

楼主的意思应该不是隔行变色，是一个列表从上到下逐渐变色，类似于背景色的意思吧。

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

licip 2013-04-20

打赏
举报

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

魔术世界中文版 2013-04-20

打赏
举报

你说的渐变是隔行变色，还是什么我写的这个是改变透明度


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