Highlight cells with past dates
Hi guys I dont know if this is something that a new programmer should true or not, but heres my problem. I have a table of 13 columns at at present about 400 rows. yes i nkow this is a large table and unfortunatley it will only be getting bigger. what i am trying to achive with this table, somehow, is to have a function that checks the cell contents ( a date dd/mm/yyyy) in the 12th coloumn and if the date has past that it will will add a css to the row.
Through help from some very intelligent programmers i have a code that should work. but i cant get it to work in any way.
Can anyone help me out with this problem.
Thanks.
The code that i have is:
<script language="javascript">
$(document).ready(function() {
function parseDate(dateString)
{
return new Date(Date.parse(dateString));
}
$('#names tr').each(function(index)
{
var row = $(this);
if (parseDate(elem.find("td:eq(1)").text()) < new Date())
row.addClass('row');
});
});
</script>
My table is set out like this:
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>Date</td>
<td>Date</td>
<td>Data</td>
</tr>
ok and this is what i have now:
<html>
<head>
<style>
#sprog tr {
background: #00FF00;
}
#sprog tr.past {
background: #FF0000;
}
</style>
<script src="jquery 1.4.2.js"></script>
<script>
$(function()
{
$('#sprog .date').each(function()
{
var row_date = Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3'));
var now_date = new Date().getTime();
if(row_date < now_date)
{
$(this).parent('tr').addClass('past');
}
}
);
}
);
</script>
<title>cells</title>
</head>
<body>
<table id="sprog">
<tbody>开发者_运维百科
<tr>
<td>14/08/2010</td>
<td>20/10/2015</td>
</tr>
<tr>
<td>2</td>
<td class="date">14/10/2010</td>
</tr>
<tr>
<td>3</td>
<td class="date">04/10/2010</td>
</tr>
<tr>
<td>10/12/2010</td>
<td class="date">12/10/2010</td>
</tr>
<tr>
<td>12/10/2010</td>
<td class="date">01/01/1900</td>
</tr>
</tbody>
</table>
</body>
</html>
HTML:
<table id="dates_table">
<tr>
<th>Name</th>
<th>Date of Birth</th>
</tr>
<tr>
<td>Bob</td>
<td class="date">01/02/2003</td>
</tr>
<tr>
<td>Johnny</td>
<td class="date">03/02/1980</td>
</tr>
<tr>
<td>Ted</td>
<td class="date">14/12/2010</td>
</tr>
<tr>
<td>Jane</td>
<td class="date">08/08/2005</td>
</tr>
</table>
CSS:
#dates_table tr {
background: #00FF00;
}
#dates_table tr.past {
background: #FF0000;
}
JavaScript:
$(function()
{
$('#dates_table .date').each(function()
{
var row_date = Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3'));
var now_date = new Date().getTime();
if(row_date < now_date)
{
$(this).parent('tr').addClass('past');
}
}
);
}
);
Note I've added a class="date" to the date <td>s so position won't make a difference.
Live demo here: http://jsfiddle.net/LPjfS/2/
Pure javascript should work:
var theTable = $('yourTable').tBodies[0];
for(x=0;x<theTable.rows.length;x++) {
if(theTable.rows[x].cells[11]=='foo') {
theTable.rows[x].cells[11].style.whatever= 'bar';
}
}
Code is untested - sorry - but should be pretty good.
A good explanation: http://www.howtocreate.co.uk/tutorials/javascript/domtables
Ok so after some digging i found that i wasn't calling the jquery correctly and i should actually look like this:
<html>
<head>
<title>trial cell highlight</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
body {
background-color: transparent;
padding: 10px;
}
#demotable1 tr {
background: white;
}
#demotable1 tr.past {
background: #FF0000;
color: #999999;
}
</style>
<script type="text/javascript">
//<![CDATA[
$(function()
{
$('#demotable1 .date').each(function()
{
var cell_date = Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3'));
var now_date = new Date().getTime();
if(cell_date < now_date)
{
$(this).parent('tr').addClass('past')
}
}
);
}
);
//]]>
</script>
</head>
<body>
<table id="demotable1">
<tbody>
<tr>
<th>Name</th>
<th>Date of Birth</th>
</tr>
<tr>
<td>Bob</td>
<td class="date">01/02/2003</td>
</tr>
<tr>
<td>Johnny</td>
<td class="date">03/02/1980</td>
</tr>
<tr>
<td>Ted</td>
<td class="date">14/12/2010</td>
</tr>
<tr>
<td>Jane</td>
<td class="date">08/08/2005</td>
</tr>
</tbody>
</table>
</body>
</html>
Thanks to every one who helped me out with this one.
加载中,请稍侯......
精彩评论