Question

我有一个从mysql创建的表格，显示如下数据：
LastNam - 小时 - 总计
安德森 - 33 - 1,000
安德森 - 30 - 2,000
安德森 - 23 - 1,000
Ballestero - 12 - 3,000
Ballestero - 05 - 2,000
卡斯特林斯基 - 38 - 8,000
卡斯特林斯基 - 96 - 6,000

我想通过为所有Andersons设置背景颜色来格式化这些线条，没有Ballestero的背景颜色，然后是Castrinsky的背景颜色。

像：
LastNam - 小时 - 总计
安德森 - 33 - 1,000
安德森 - 30 - 2,000
安德森 - 23 - 1,000
Ballestero - 12 - 3,000
Ballestero - 05 - 2,000
卡斯特林斯基 - 38 - 8,000
卡斯特林斯基 - 96 - 6,000

非常类似于大多数jquery表插件或css上的备用行，但不是每隔一行，而是每次前一行与当前行不同时。我尝试过在这里找到的HeatColor插件：http://www.jnathanson.com/blog/client/jquery/heatcolor/但有两个问题，1）它显示的颜色太多，我只需要两个; 2）它似乎比数字更好用，而不是字母。

由于

Answer 1

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

Answer 2

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

这是一些psudeocode ...显示基本想法。这假设您是从服务器动态编写表...

$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';
    }
}

Answer 3

这里有一些伪代码。希望它有所帮助：）

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;
    }
}

Answer 4

为什么不亲自检查第一个字母，而不是使用另一个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);
});

当然代码不是很好，但我希望你能得到主旨。我从问题标题中假设您想要替换字母，因为您提到了字母顺序，但是如果您需要在特定单词之间交替，则它是相同的想法。

Answer 5

EXAMPLE

<强> 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;
});

基于字母顺序在html表中的两种颜色之间交替

5 个答案: