0

我有一个从 mysql 生成的表，它显示如下数据：
LastNam - Hrs - Total
Anderson - 33 - 1,000
Anderson - 30 - 2,000
Anderson - 23 - 1,000
Ballestero - 12 - 3,000
Ballestero - 05 - 2,000
Castrinsky - 38 - 8,000
Castrinsky - 96 - 6,000

我想通过为所有安德森设置背景颜色来格式化这些行，为巴列斯特罗设置背景颜色，然后为卡斯特林斯基设置相同的背景颜色。

喜欢：
LastNam - Hrs - Total
Anderson - 33 - 1,000
Anderson - 30 - 2,000
Anderson - 23 - 1,000
 Ballestero - 12 - 3,000
Ballestero - 05 - 2,000
Castrinsky - 38 - 8,000
Castrinsky - 96 - 6,000

与大多数 jquery 表插件或 css 上的备用行非常相似，但不是每隔一行，而是每次上一行与当前行不同时都需要。我曾尝试使用此处找到的 HeatColor 插件：http ://www.jnathanson.com/blog/client/jquery/heatcolor/但有两个问题，1）它显示的颜色太多，我只需要两个；2）它似乎更适合数字而不是字母。

谢谢

4

5 回答 5

0

您可以从姓氏生成的哈希码中驱动热图。

于 2013-04-12T17:14:41.800 回答
0

你基本上想存储你开始的姓氏和你的班级，遍历循环，当你的姓氏改变时，让你的班级改变......

这是一些伪代码......展示基本思想。这是假设您正在从服务器动态写入表......

$prevLastName = (row 1 last name);
$rowClass = 'firstColor';
//start your loop here...
for (...)
{
    //output table row
    echo '<tr id="uniqueIdentifier"  class="rowClass">....</tr>';
    if ($prevLastName === ($currentRowLastName))
    {
        $prevLastName == $currentRowLastName;
        if ($rowClass === 'firstColor')
            $rowClass = 'secondColor';
        else $rowCloass = 'firstColor';
    }
}
于 2013-04-12T17:25:50.440 回答
0

那么这里有一些伪代码。希望能帮助到你 ：）

var lastLastName = "";
var zebra = 0;
foreach (row in rows) {
    if (row.lastName != lastLastName) {
        if (zebra == 1) {
            zebra = 0;
        }
        else {
            zebra = 1;
        }
        lastLastName = row.lastName;
    }

    if (zebra == 0) {
        add an odd class;
    }
    else {
        add an even class;
    }
}
于 2013-04-12T17:25:57.870 回答
0

为什么不自己检查第一个字母，而不是使用另一个 jQuery 插件？这很简单，例如：

var previousLetter = '';
var styleVariant = 1; // Let's use 1 or 2 to indicate the styling

$('table tr').each(function()
{
    var name = $(this).children('td').first().text();
    var firstLetter = name.charAt(0);

    // If we're at the row where the next letter starts
    if (firstLetter != previousLetter)
    {
        previousLetter = firstLetter;

        // Switching the style to the other variant
        styleVariant = styleVariant == 1 ? 2 : 1;
    }

    $(this).addClass('style' + styleVariant);
});

当然，代码不是那么好，但我希望你能明白要点。我从问题标题中假设您要替换字母，因为您提到了字母顺序，但如果您需要在特定单词之间进行替换，这是相同的想法。

于 2013-04-12T17:26:27.837 回答
0

例子

HTML

<table>
    <thead>
        <tr>
            <th>Last Name</th>
            <th>Hours</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Anderson</td>
            <td>33</td>
            <td>1,000</td>
        </tr> 
        <tr>
            <td>Anderson</td>
            <td>30</td>
            <td>2,000</td>
        </tr>
        <tr>
            <td>Anderson</td>
            <td>23</td>
            <td>1,000</td>
        </tr> 
        <tr>
            <td>Ballestero</td>
            <td>12</td>
            <td>3,000</td>
        </tr>          
        <tr>
            <td>Ballestero</td>
            <td>05</td>
            <td>2,000</td>
        </tr>          
        <tr>
            <td>Castrinsky</td>
            <td>38</td>
            <td>8,000</td>
        </tr>          
        <tr>
            <td>Castrinsky</td>
            <td>96</td>
            <td>6,000</td>
        </tr>         
    </tbody>    
</table>

CSS

.a1{
    background-color: wheat
}
.a2{
    background-color: gray;
}

JavaScript/jQuery

var $tableBodyRows = $("table tbody tr");
var placeHolder = $("td:eq(0)", $tableBodyRows).text().trim().charAt(0);

$tableBodyRows.each(function(i){
    var letter = $("td:eq(0)", this).text().trim().charAt(0);

    if(letter === placeHolder){
        var c = ($(this).prev().attr('class') !== undefined ? $(this).prev().attr('class') : "a1")
        $(this).addClass(c);
    }else{
        var c = ($(this).prev().attr('class') === "a1" ? "a2" : "a1");
        $(this).addClass(c);
    }

    placeHolder = letter;
});
于 2013-04-12T17:49:40.763 回答