[英]How can I modify code to work with a different HTML table format?
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. 我正在尝试使用一些JavaScript,它将运行30天或更短时间的HTML表格行中的任何日期都涂成红色。 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.
以下示例运行良好,但我需要在Wordpress网站上使用名为tablepress的插件使用javascript代码,该插件使用不同的表格布局。
Can anybody please help me to modify the javascript code to work with the tablepress layout? 有人可以帮我修改javascript代码以与tablepress布局一起使用吗? Many thanks.
非常感谢。
HTML Format that does work: 起作用的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 Format that does not work: 无法使用的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 expiry date colouring code: 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();
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/ 演示: http : //jsfiddle.net/dc12drch/
Note: i have changed separator, for dateArray (for splitting). 注意:我已经更改了分隔符,用于dateArray(用于拆分)。 Note2: loop starts from 1, not zero, because we want to skip first cell (in table head).
注意2:循环从1开始,而不是零,因为我们要跳过第一个单元格(在表头中)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.