Question

我正在努力改善表格行的视觉吸引力。表行中的数据是动态生成的，并且包含大量信息。该表中有一列给出了发布该特定信息行的时间。根据发布信息的日期/月份等，我必须为不同的行着色。

它与以下链接完全相同： http://www.nseindia.com/live_market/dynaContent/live_watch/equities_stock_watch.htm

此外，表行还必须有一个小的彩色条，其颜色将由同一行中的另一个字段确定。我想知道如何在jquery中进行它。我知道javascript但它搞砸了。

任何形式的帮助都将受到赞赏。

感谢。

Answer 1

E.g。您可以根据值更改表格单元格的背景颜色（表格单元格值小于零）：

// for each table cell
$('td').each(function() {
    // get table cell value and try to convert to an float
    var fValue = parseFloat($(this).text());
    // if value is a number and less then zero
    if (!isNaN(fValue) && fValue < 0) {
        // change the background color to red
        $(this).css('background-color', 'red');
    }
});

在构建表之后必须调用脚本。另请参阅此example。

=== UPDATE ===

要获取单元格的行，您可以使用.parent()：

// for each table cell
$('td').each(function() {
    // get table cell value and try to convert to an float
    var fValue = parseFloat($(this).text());
    // if value is a number and less then zero
    if (!isNaN(fValue) && fValue < 0) {
        // get table row
        var oTableRow = $(this).parent();
        // change the background color to red
        oTableRow.css('background-color', 'red');
    }
});

另见example。

下一个选择是遍历所有tr：

$('tr').each(function() {
    var jRow = $(this);
    // for each table cell
    jRow.find('td').each(function() {
        // get table cell value and try to convert to an float
        var fValue = parseFloat($(this).text());
        // if value is a number and less then zero
        if (!isNaN(fValue) && fValue < 0) {
            // change the background color of the row to red
            jRow.css('background-color', 'red');
        }
    });
});

请参阅此example。

要使用.find("td.<selector>")，<selector>必须是td的一个类。或者，您可以使用.find("td[attr='..']")过滤具有特殊属性的所有td。但我不知道内容选择器。

根据表行本身的条件，使用jquery为表的不同行着色

1 个答案: