javascript - テーブル マップの作成に関する問題

Question

マップの作成に問題があります。テーブルで気が付いたのですが、ホバーが遅すぎます。では、私の問題を解決するためにどの手段をアドバイスしてもらえますか? キャンバスを使用する必要がありますか? クライアントで json を使用してマップを生成する方法と、サーバーで実行する方法のどちらが優れていますか?

完全な例: http://jsfiddle.net/MSpbW/3/ (テーブルは自動的に生成されました)。

html:

<tbody>
<tr>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
</tr>
<tr>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-border"></td>
</tr>
<tr>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-border"></td>
</tr>
<tr>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-empty" style=""></td>
    <td class="cell cell-hotel-border"></td>
</tr>
<tr>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
    <td class="cell cell-hotel-border"></td>
</tr>
</tbody>

js:

$(document).ready(

    function() {
        var color;

        $(".cell-hotel-empty").hover( function () {
            color = $(this).css('background');
            $(".cell-hotel-empty").css('background', '0');

        }, function() {
                $(".cell-hotel-empty").css('background', color);
        }
        )
    }
)