Mettez en surbrillance des cellules avec des dates antérieures

Salut les gars, je ne sais pas si c'est quelque chose qu'un nouveau programmeur devrait être vrai ou pas, mais voici mon problème. J'ai actuellement une table de 13 colonnes à environ 400 lignes. oui je nkow c'est une grande table et malheureusement elle ne fera que grossir. Ce que j'essaie de faire avec cette table, c'est d'avoir une fonction qui vérifie le contenu de la cellule (une date jj/mm/aaaa) dans la 12ème colonne et si la date est passée cela va ajouter un css au rangée.Mettez en surbrillance des cellules avec des dates antérieures

Grâce à l'aide de certains programmeurs très intelligents, j'ai un code qui devrait fonctionner. mais je ne peux pas le faire fonctionner de toute façon.

Quelqu'un peut-il m'aider avec ce problème.

Merci.

Le code que j'ai est:

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

Ma table est définie comme suit:

<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 et c'est ce que j'ai maintenant:

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

Source

2010-10-14 Jason Maher

Ok donc après quelques recherches je trouve que je ne demande pas correctement le jquery et je dois effectivement ressembler à ceci:

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

Merci à tous ceux qui ont aidé moi avec celui-ci.

Source

2010-10-18 02:50:19

pur le javascript devrait fonctionner:

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'; 
    } 
}

Le code n'a pas été testé - désolé - mais devrait être plutôt bon.

Une bonne explication: http://www.howtocreate.co.uk/tutorials/javascript/domtables

Source

2010-10-14 06:04:16 Ben

Eh bien, un élément jquery - IMPURE !!! – Ben

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'); 
     } 
    } 
    ); 
} 
);

Remarque J'ai ajouté un class="date" à la date <td> s donc la position ne fera pas de différence.

démo en direct ici: http://jsfiddle.net/LPjfS/2/

Source

2010-10-14 06:21:34 chigley

merci pour ce Chigley, mais je pense que je suis allé et droit royaly confus moi-même. quand j'utilise la démo en direct à http://jsfiddle.net/LPjfS/2/ ma table fait ce que je veux à dao sans aucun problème. mais quand j'essaie de le faire, je ne fais rien. J'ai duduced que j'ai besoin de charger jquery 1.4.2.js pour ma page que j'ai mais sache qu'il ne fait rien. c'est le code que je suis venu avec: –

HTML: cellules –

14/08/2010	20/10/2015
14/10/2010
04/10/2010
10/12/2010	12/10/2010
12/10/2010	01/01/1900

–

Mettez en surbrillance des cellules avec des dates antérieures

Répondre

Questions connexes