如何修改代碼以使用其他HTML表格式？

Question

我正在嘗試使用一些JavaScript，它將運行30天或更短時間的HTML表格行中的任何日期都塗成紅色。 以下示例運行良好，但我需要在Wordpress網站上使用名為tablepress的插件使用javascript代碼，該插件使用不同的表格布局。

有人可以幫我修改javascript代碼以與tablepress布局一起使用嗎？ 非常感謝。

起作用的HTML格式：

<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格式：

 <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到期日期着色代碼：

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

實際上，由於所有日期單元格都具有類，因此您可以輕松得多。 所以：

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

}

演示： http ： //jsfiddle.net/dc12drch/

注意：我已經更改了分隔符，用於dateArray（用於拆分）。 注意2：循環從1開始，而不是零，因為我們要跳過第一個單元格（在表頭中）。