Question

给定一个带有“DueDate”列的表，用什么来表示jQuery代码，根据每个DueDate单元格相对于另一个日期的值来设置表行的背景颜色？

我最感兴趣的是如何正确处理日期的陷阱......如何在javascript中明确地使用字符串值作为日期，我是否必须对日期格式非常严格等等。 / p>

Answer 1

鉴于您可以使用Date.parse()将日期转换为秒（或毫秒），您可以使用以下内容：

var min = false, max = false;

// Find the minimum and maximum date
$('tr').each(function() {
    // Acquire a numeric presentation somehow
    var milliseconds = parseInt(Date.parse($(this).find('td.date').html()));

    // Determine the min and max
    min = milliseconds < min || !min ? milliseconds : min;
    max = milliseconds > max || !max ? milliseconds : max;
});


$('tr').each(function() {
    // Get the numeric presentation for current row
    var milliseconds = parseInt(Date.parse($(this).find('td.date').html()));

    // The relative position of the date, 0 = min date, 1 = max date
    var position = (milliseconds - min) / (max - min);

    // Generate color components
    var red   = Math.round(((0 - position) + 1) * 255).toString(16);
    var green = Math.round(position * 255).toString(16);

    // Build hex color string
    red     = red.length == 1   ? '0' + red   : red;
    green   = green.length == 1 ? '0' + green : green;
    var hex = '#'+red+green+'00';

    // Apply the color
    $(this).find('td').css('background-color', hex);
});

如果代码中不清楚，此代码段将首先找到最小和最大日期，然后为行着色，使最小日期为红色，最大为绿色。

希望这有帮助。

根据超过另一个日期的单元格中的DATE设置行的背景颜色

1 个答案: