0

DB から印刷された動的データ/テーブル。チームが勝った回数、引き分けた回数、負けた回数を取得する必要があります。jQuery を初めて使用し、何からコーディングを開始すればよいかわかりません (?!)。最初に Chelsea が表示される行を取得し、次にスコアを比較し、配列を使用して W、T、L を格納し、結果を最後 (?) に出力することを考えていました。

テーブルは次のようになります。

<table>
<tr id="12">
   <td class="238 ekipi_1">Chelsea</td>
   <td class="231 ekipi_2">ManU</td>
   <td class="goals_238">4</td>
   <td class="goals_231">2</td>
</tr>

<tr id="13">
   <td class="242 ekipi_1">Reading</td>
   <td class="238 ekipi_2">Chelsea</td>
   <td class="goals_242">3</td>
   <td class="goals_238">3</td>
</tr>

<tr id="16">
   <td class="251 ekipi_1">Swansea</td>
   <td class="238 ekipi_2">Chelsea</td>
   <td class="goals_251">5</td>
   <td class="goals_238">3</td>
</tr>
</table>

結果は次のようになります。

          W   T   L

Chelsea | 1 | 1 | 1 |
Reading | 0 | 1 | 0 |
ManU    | 0 | 0 | 1 |

有利なスタートのためのヒントは大歓迎です。

4

1 に答える 1

1

初期データを読み取り、オブジェクトを構築するには、これを行うことができます..

    var teams = {
    "Chelsea": {"W": 0, "T": 0, "L": 0},
    "ManU": {"W": 0, "T": 0, "L": 0},
    "Reading": {"W": 0, "T": 0, "L": 0},
    "Swansea": {"W": 0, "T": 0, "L": 0}
};

$('table tr').each(function() {
    var $this = $(this);
    var team1 = $this.find('td:eq(0)').text();
    var team2 = $this.find('td:eq(1)').text();
    var score1 = $this.find('td:eq(2)').text();
    var score2 = $this.find('td:eq(3)').text();

    if(+score1 === +score2){
        teams[team1]["T"] =  +teams[team1]["T"] +1; 
        teams[team2]["T"] =  +teams[team2]["T"]+1; 
    }  
    else if(+score1 > +score2){
        teams[team1]["W"] =  +teams[team1]["W"]+1; 
        teams[team2]["L"] =  +teams[team2]["L"]+1; 
    }
    else{
        teams[team1]["L"] =  +teams[team1]["L"]+1; 
        teams[team2]["W"] =  +teams[team2]["W"]+1; 
    }        
});

// Print the data

$.each(teams, function(key,value){
    var $clone = $('#template');
    $clone.find('.team').html(key);
    $clone.find('.score:eq(0)').html(value["W"]);
    $clone.find('.score:eq(1)').html(value["T"]);   
    $clone.find('.score:eq(2)').html(value["L"]);
    $('#output').append($clone.html());
});

フィドルをチェック

チーム オブジェクトを読み取り、完了したら印刷することができます。

于 2012-11-29T23:24:23.433 に答える