tags:

views:

49

answers:

3
+1  Q: 

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

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

Steve  2010-10-14 06:04:16
Well, one jquery element - IMPURE!!!
Steve  2010-10-14 06:09:51
A: 

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/

chigley  2010-10-14 06:21:34
thanks for that Chigley, but i think i have gone and right royaly confused my self. when i use the live demo at http://jsfiddle.net/LPjfS/2/ my table does what i want it to dao without any problems. but when i try to do it my self it is doing nothing. i duduced that i need to load jquery 1.4.2.js for my page which i have but know its doing nothing. this is the code i have come up with:
Jason Maher  2010-10-14 22:22:57
HTML:<html><head><style>#sprog tr {background: #00FF00;}#sprog tr.past {background: #FF0000;}</style><script scr="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>
Jason Maher  2010-10-14 22:23:15
<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>
Jason Maher  2010-10-14 22:24:17
@Jason - Post a link to where I can look at your code and I'll see if I can spot what's wrong with it :) EDIT: Just seen your comments above, first thing that springs out is `<script scr` should read `<script src`
chigley  2010-10-14 22:24:22
sorry i dont know how to make it sit like yours
Jason Maher  2010-10-14 22:24:56
@Jason - that's because comments aren't really the best place for code! You could edit your OP or add a link as a comment. Would make it easier for answerers!
chigley  2010-10-14 22:25:43
sorry i dont actually have it up anywhere yet, can i email it to you in a word doc?
Jason Maher  2010-10-14 22:25:54
@Jason - just edit your question to include your current code so I can take a look. Or post it on something like JSFiddle.
chigley  2010-10-14 22:28:48
@chigley - Thanks for all you help with this problem, it works out i wasn't calling the Jquery correctly. now that i have worked that out it is working fine.
Jason Maher  2010-10-18 02:48:34
Don't forget to accept an answer once the problem is solved. Green tick mark to the left of each answer.
chigley  2010-10-18 06:49:36
A: 

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.

Jason Maher  2010-10-18 02:50:19

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript