javascript - テーブルに動的な td (列) を持つ tr (行) を追加する方法は?

Question

trのコンテンツを保持するダイナミックについて質問がありtdます。

フロー コードのようなテーブルがあります。

<table id="map2">
    <tr>
        <td class="15c">15</td>
        <td class="16c">16</td>
        <td class="17c">17</td>
    </tr>
    <tr>
        <td class="15c">15</td>
        <td class="16c">16</td>
        <td class="17c">17</td>
    </tr>
</table>

列を動的に作成する jQuery コードをいくつか追加しました。流れるコードのように:

$('#map2').on('mouseenter', 'td:last-child', function(){
            var tdClass = $(this).attr('class');
            var newClass = parseInt(tdClass);
            if(newClass <= 30) {
                $(this).after('<td class="'+ (newClass+1) +'c">'+ (newClass+1) +'</td><td class="'+ (newClass+2) +'c">'+ (newClass+2) +'</td><td class="'+ (newClass+3) +'c">'+ (newClass+3) +'</td>');
            } else {
                alert('end!')
            }
        });

        $('#map2').on('mouseenter', 'td:first-child', function(){
            var tdClass = $(this).attr('class');
            var newClass = parseInt(tdClass);
            if(newClass >= 3) {
                $(this).before('<td class="'+ (newClass-3) +'c">'+ (newClass-3) +'</td><td class="'+ (newClass-2) +'c">'+ (newClass-2) +'</td><td class="'+ (newClass-1) +'c">'+ (newClass-1) +'</td>');
            } else {
                alert('end!')
            }
        });

そのコードは私のために作成します。今、コンテンツを保持して (行)tdを作成したいと思います。trたとえば、新しい行が作成されたとき、以前のようなコンテンツが before に含まtdれていましたtr。私はこのようないくつかのコードを試しました:

$('#map2').on('mouseenter', 'tr:first-child', function(){
            var trCont = $(this).html;
            // $(this).before('<tr>'+ trCont +'</tr>');
            $(this).before('<tr><td>new row</td></tr>');
        });

しかし、うまくいきませんでした。どうすればこの問題を解決できますか?

http://jsfiddle.net/H6MSS/2/