怎么根据条件让一行数据变颜色
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<table >
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>出生年月</td>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>男</td>
<td>2000-12-26</td>
</tr>
<tr>
<td>李四</td>
<td>24</td>
<td>男</td>
<td>1999-02-13</td>
</tr>
<tr>
<td>王五</td>
<td>24</td>
<td>男</td>
<td>1998-02-13</td>
</tr>
</table>
</body>
</html>
我想要的效果是根据 出生年月 小于 2000-1-1的后两行数据颜色变红色 该怎么解决 html
[解决办法]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="tb1" >
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>出生年月</td>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>男</td>
<td>2000-12-26</td>
</tr>
<tr>
<td>李四</td>
<td>24</td>
<td>男</td>
<td>1999-02-13</td>
</tr>
<tr>
<td>王五</td>
<td>24</td>
<td>男</td>
<td>1998-02-13</td>
</tr>
</table>
<script>
$(function(){
var v= "2000-1-1".replace(/-(\d)\b/g,'-0$1');
$('#tb1 td:nth-child(4)').map(function(){
if(this.innerHTML < v ){
$(this.parentNode).css('color','red')
}
});
})
</script>
[解决办法]
看得出楼主并不十分熟悉JS
对于DOM中数据的处理，实际你的需求还只是通过数据作用表现层，所以其实并不复杂，楼上说的在服务端处理是一种方式，例如在php中进行判定 小于2000-1-1的就给他一个tr级别的class 然后在样式表中定义好这个class的样式 目的就达到了
实际从效率的角度出发 表现层的东西 我一般要求除非特殊情况 尽量不用服务端去处理 否则无形中增加服务器的效率开支 所以就上面个需求 放到客户端代码中去解决即可
具体代码就不写了 尽量用class或者id的html方法 结合js相关代码即可实现 对DOM结构代码不熟悉的情况下 建议使用jQuery 上头的td中 就可以按姓名 年龄 出生分别给它定义class
<td class="name">xxx</td>
<td class="age">123</td>
<td class="birthday">2222-2-2</td>
在jQuery中 第三项出生年月 就可以用 $(".birthday")来获得这样一个数组 接着用循环来一个一个判定 然后满足条件的就把相关文字改成红色就可以了
对于js来处理DOM中的一些表现样式 不要一味从js来考虑怎么实现 更多的从样式表 和 HTML元素中两个特殊属性class和id来做 js通过这两个属性操作DOM将会比较简单
[解决办法]
小于系统日期？
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("tr:gt(0) td:last-child").each(function(i,e){
if(new Date($(this).text().replace(/-/g,"/"))<new Date()){
$(this).parent().css('color','red');
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>出生年月</td>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>男</td>
<td>2013-09-26</td>
</tr>
<tr>
<td>李四</td>
<td>24</td>
<td>男</td>
<td>1999-02-13</td>
</tr>
<tr>
<td>王五</td>
<td>24</td>
<td>男</td>
<td>1998-02-13</td>
</tr>
</table>
</body>
</html>