Question

我基本上试图将表中的一行变成不同的颜色。我目前正在使用jquery插件Sheetrock从谷歌表中获取信息。我希望当第9行的值低于10时将其变为红色。

以下是我正在研究的内容：http://jsfiddle.net/m04ddeu2/435/。

这是谷歌表我正在抓取信息： https://docs.google.com/spreadsheet/ccc?key=0AlRp2ieP7izLdGFNOERTZW0xLVpROFc3X3FJQ2tSb2c#gid=0

HTML：

<table id="statistics" class="table table-condensed table-striped"></table>

Javascript：

// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheet/ccc?key=0AlRp2ieP7izLdGFNOERTZW0xLVpROFc3X3FJQ2tSb2c#gid=0';

// Load an entire sheet.
$('#statistics').sheetrock({
    url: mySpreadsheet,
    rowHandler: formatRows
});

var formatRows = function (options) {

    var columnNumber = 9;
    var threshhold = 10;

    $('tr', options.target).each(function (i, el) {

        var $tableRow = $(el);
        var amount = $('td:nth-child(' + columnNumber + ')', $tableRow).text();

        if (parseInt(amount) <= threshhold) {
            $tableRow.addClass('warning');
        }

    });

};

CSS：

.warning {
color:red
}

我在代码中看不到任何问题。我写变量的方式有问题吗？

Answer 1

Sheetrock正在为rowHandler寻找的功能需要采用以下形式：

// Default row handler: Output a row object as an HTML table row.
var toHTML = function (row) {

    var cell;
    var html = '';

    // Use "td" for table body row, "th" for table header rows.
    var tag = (row.num) ? 'td' : 'th';

    // Loop through each cell in the row.
    for (cell in row.cells) {
        if (row.cells.hasOwnProperty(cell)) {
            // Wrap the cell value in the cell tag.
            html += wrapTag(row.cells[cell], tag, '');

            // you can add your logic here to test for ninth column value under 10

        }
    }

    // Wrap the cells in a table row tag.
    return wrapTag(html, 'tr', '');
};

如何使用javascript将标记添加到标记中

1 个答案: