javascript - 根据部分列数据更改表格行的背景颜色

Question

这个问题有各种各样的问题，但我还没有找到令我满意的解释。这就是我所得到的:我有一个表，其中有根据用户的登录凭据动态输入的数据。表中的数据是通过在 ProductID 字段前面添加 (a) 或 (b) 或 (c) 等来组织的，以便将它们组织在一起。客户希望带有 (a) 的行的背景颜色为红色。他们希望 (b) 的行是蓝色的。 (三)绿色化。我想你看到了这个模式。我需要知道如何在 JavaScript 或 jQuery 中执行此操作，但如果可能的话，我希望最大限度地减少要使用的代码量。我两者都不擅长，但我可以使用示例代码并尝试获得正确的结果。有人可以帮忙吗？也许给我指出正确的方向？

Answer 1

这是一个使用 jQuery 的示例解决方案。

$(document).ready(function () {
    var table = $('#foo'),
        rows = table.find('tr'), cells, background, code;        
    for (var i = 0; i < rows.length; i+=1) {
        cells = $(rows[i]).children('td');
        code = $(cells[0]).text().substr(0, 3);        
        switch (code) {
            case '(A)':
                background = '#e29e6e';
                break;
            case '(B)':
                background = '#f9cf80';
                break;
            case '(C)':
                background = '#ffe8c0';
                break;
            default:
                background = '#95704e';
        }
        $(rows[i]).css('background-color', background);
    }
});

带表:

<table id="foo">
    <tr>
        <td>(A) 10x12 Blue Bag</td>
        <td>Val</td>
    </tr>
    <tr>
        <td>(A) 15x12 Red Bag</td>
        <td>Val</td>
    </tr>
    <tr>
        <td>(B) 10x12 T-shirt</td>
        <td>Val</td>
    </tr>
    <tr>
        <td>(A) 10x12 Yellow Bag</td>
        <td>Val</td>
    </tr>
    <tr>
        <td>(C) 10x12 Shoes</td>
        <td>Val</td>
    </tr>
</table>

在此代码中，您首先将所有行放入 rows 变量中。之后，您将当前行 ($(rows[i])) 中的每个单元格放入单元格数组中。之后，我们假设取决于行背景颜色的列是第一列。然后我们将其值 ($(cells[0]).text()) 检查到开关中，然后绘制当前行。希望这会有所帮助。

//这里的结果:http://jsfiddle.net/cEY7K/6/