How can I modify code to work with a different HTML table format?

Question

I am trying to use some javascript that will colour in red any dates in a row of a HTML table that have thirty days or less to run. The following example works fine, but I need to use the javascript code on a wordpress site using a plugin called tablepress, which uses a different table layout.

Can anybody please help me to modify the javascript code to work with the tablepress layout? Many thanks.

HTML Format that does work:

<table>
<tr><td>1</td><td>Face Cream</td><td>23-05-2015</td></tr>
<tr><td>2</td><td>Aspirin</td><td>05-10-2015</td></tr>
<tr><td>3</td><td>Arnica Cream</td><td>23-04-2015</td></tr>
<tr><td>4</td><td>Vitamin C</td><td>06-04-2015</td></tr>
</table>

HTML Format that does not work:

 <table id="tablepress-2" class="tablepress tablepress-id-2">
    <thead>
    <tr class="row-1 odd">
    <th class="column-1">Item</th><th class="column-2">Expiry Date</th>
    </tr>
    </thead>
    <tbody class="row-hover">
    <tr class="row-2 even">
    <td class="column-1">Face Cream</td><td class="column-2">23/05/2015</td>
    </tr>
    <tr class="row-3 odd">
    <td class="column-1">Aspirin</td><td class="column-2">5/10/2015</td>
    </tr>
    <tr class="row-4 even">
    <td class="column-1">Arnica Cream</td><td class="column-2">23/04/2015</td>
   </tr>
    <tr class="row-5 odd">
    <td class="column-1">Vitamin C</td><td class="column-2">6/04/2015</td>
   </tr>
    </tbody>
    </table>

javascript expiry date colouring code:

function colorDate(){
var parents = document.getElementsByTagName("tr")

for (var i = 0, ii = parents.length; i < ii; i++) {
var parent = parents[i],
    children = parent.children

for (var j = 0, jj = children.length; j < jj; j++) {
    var elem = children[j]
    if (j % 3 === 2) {
        var dateElement = elem.innerHTML;
        var dateArray = dateElement.split("-");     
        var prevTime = new Date( dateArray[2],dateArray[1]-1,dateArray[0]);
        var thisTime = new Date();
        var diff = prevTime.getTime() - thisTime.getTime();
        var days = 1000*60*60*24;
        var diffInDays = Math.ceil(diff / days);
        if (diffInDays > 30) {
            elem.style.color = "#008000";
        }

        else if (diffInDays <= 30) {
            elem.style.color = "#ff0000";
        }
        if(dateElement=="00-00-0000"){
            elem.style.color = "#0000ffr";
        }
     }
   }
}
}
colorDate();

Answer 1

Actually, you can get it much simpler, since all date cells have class. So:

function colorDate(){
var cells = document.querySelectorAll(".column-2");

    for(i=1;i<cells.length;i++){
        elem=cells[i];
        console.log(elem.innerHTML);
        var dateElement = elem.innerHTML;
        var dateArray = dateElement.split("/");     
        var prevTime = new Date( dateArray[2],dateArray[1]-1,dateArray[0]);
        var thisTime = new Date();
        var diff = prevTime.getTime() - thisTime.getTime();
        var days = 1000*60*60*24;
        var diffInDays = Math.ceil(diff / days);
        if (diffInDays > 30) {
            elem.style.color = "#008000";
        }

        else if (diffInDays <= 30) {
            elem.style.color = "#ff0000";
        }
        if(dateElement=="00-00-0000"){
            elem.style.color = "#0000ffr";
        }  
    }

}

Demo: http://jsfiddle.net/dc12drch/

Note: i have changed separator, for dateArray (for splitting). Note2: loop starts from 1, not zero, because we want to skip first cell (in table head).