用JS改变表格某一行的颜色
其实是Redmine里面的问题，我的工作台现在是这样的：
我想当当前日期超过计划结束日期时，也就是任务超时的时候，这一条记录的颜色变为红色来提醒。
初步想法是判断结束日期和当前日期的大小，然后通过JS来改。
源代码如下：
<% if issues && issues.any? %>
<%= form_tag({}) do %>
<table class="list issues">
<thead><tr>
<th>#</th>
<th><%=l(:field_project)%></th>
<th><%=l(:field_tracker)%></th>
<th><%=l(:field_subject)%></th>
<th><%=l(:field_start_date) %></th>
<th><%=l(:field_due_date)%></th>
</tr></thead>
<tbody>
<% for issue in issues %>
<tr id="issue-<%= h(issue.id) %>" class="hascontextmenu <%= cycle('odd', 'even') %> <%= issue.css_classes %>">
<td class="id">
<%= check_box_tag("ids[]", issue.id, false, :style => 'display:none;', :id => nil) %>
<%= link_to(h(issue.id), :controller => 'issues', :action => 'show', :id => issue) %>
</td>
<td class="project"><%= link_to_project(issue.project) %></td>
<td class="tracker"><%=h issue.tracker %></td>
<td class="subject">
<%= link_to h(truncate(issue.subject, :length => 60)), :controller => 'issues', :action => 'show', :id => issue %> (<%=h issue.status %>)
</td>
<td class="tracker"><%= issue.start_date %></td>
<td class="tracker"><%= issue.due_date%></td>
________________________________________________________________________________
这是我准备插入的代码：
<% if issue.due_date > Time.new.strftime("%Y-%m-%d") %>
<script>
document.getElementById("issue-<%= h(issue.id) %>").style.background='red'
</script>
____________________________________________________________________________________
</tr>
<% end %>
</tbody>
</table>
<% end %>
运行后查看源代码，好像根本没进JS，求指点！
------解决方案--------------------
js代码单独拿出来判断，写在里面好乱。
写了一个类似的功能。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
table#dataArea{width:720px; font-size:12px; border-top:1px solid #acacac; border-left:1px solid #c4c4c4; outline:1px solid #fff !important;}
table#dataArea thead tr{text-align:center; color:#003366; background:#e8e8e8; padding:1px; height:25px;}
table#dataArea th, table#dataArea td{font-size:12px; line-height:120%; border-right:1px solid #c4c4c4; border-bottom:1px solid #c4c4c4;}
.tableodd{background:#f2f7ee;}
.timeOver{background:#ff9292;}
</style>
</head>
<body>
<table border="0" cellpadding="3" cellspacing="0" id="dataArea">
<colgroup>
<col style="width:40px; text-align:right;"/>
<col style="width:80px;"/>
<col style="width:100px;"/>
<col style="width:200px;"/>
<col style="width:150px; text-align:center;"/>
<col style="width:150px; text-align:center;"/>
</colgroup>
<thead>
<tr>
<th align="center">#</th>
<th>项目</th>
<th>跟踪</th>
<th>主题</th>
<th>开始日期</th>
<th>计划完成日期</th>
</tr>
</thead><tbody>
<tr>
<td>16</td>
<td>测试</td>
<td>task</td>
<td>任务工时（新建）</td>
<td>2012-10-24</td>
<td>2012-10-25</td>
</tr><tr>
<td>15</td>
<td>测试</td>
<td>Project</td>
<td>测试工时工程（新建）</td>
<td>2012-10-24</td>
<td>2012-10-25</td>
</tr><tr>
<td>14</td>
<td>测试</td>
<td>Project</td>
<td>测试工时工程（等待）</td>
<td>2012-10-24</td>
<td>2012-10-24</td>
</tr><tr>
<td>13</td>
<td>工程</td>
<td>Demo</td>
<td>工程（新建）</td>
<td>2012-10-24</td>
<td>2012-10-25</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var $ = function(n,pn){return (pn
[解决办法]
document).getElementById(n);}
var today = getDate();
window.onload = function() {
var trs = $('dataArea').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var i = 0, len = trs.length; i < len; i++) {
var _tr = trs[i]
var tds = _tr.getElementsByTagName('td');
if (tds[tds.length-1].innerHTML < today) _tr.className = 'timeOver';
else if (i % 2 != 0) _tr.className = 'tableodd';
}
}
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
month = month.length == 1 ? '0'+month : month;
day = day.length == 1 ? '0'+day : day;
return year + '-' + month + '-' + day;
}
</script>
</body>
</html>
