0


次 のよう なデータを 表示 するmysql から生成されたテーブルが
あり ます 。96 - 6,000






すべての Andersons の背景色を設定し、Ballestero の背景色を設定せず、Castrinsky の背景色を同じにすることで、これらの行をフォーマットしたいと考えています。

類似:
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 の代替行に非常に似ていますが、1 行おきにではなく、前の行が現在の行と異なるたびに必要です。ここにあるHeatColorプラグインを使用してみました：http://www.jnathanson.com/blog/client/jquery/heatcolor/しかし、2つの問題があります.1）表示される色が多すぎます.2つしか必要ありません。2）文字ではなく数字の方がうまくいくようです。

ありがとう

4

5 に答える 5

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 に答える
0

姓から生成されたハッシュ コードからヒートマップを追い出すことができます。

于 2013-04-12T17:14:41.800 に答える