1

誰かが幅と高さを入力できるテーブルを作成しています。これは 16x16 td の x 単位に調整されます。

ほとんど正常に動作するようになりましたが、x 軸のサイズを大きくしているときにのみ問題が発生します。

(function() {

var src = $('#grid-source');
var wrap = $('<div id="grid-overlay"></div>');
var gsize = 16;

var cols = 32;
var rows = 32;

// create overlay
var tbl = $('<table></table>');
for (var y = 1; y <= rows; y++) {
    var tr = $('<tr></tr>');
    for (var x = 1; x <= cols; x++) {
        var td = $('<td></td>');
        td.css('width', gsize+'px').css('height', gsize+'px');
        td.addClass('eraser');
        tr.append(td);
    }
    tbl.append(tr);
}
src.css('width', cols * gsize+'px').css('height', rows * gsize+'px')

// attach overlay
wrap.append(tbl);
src.after(wrap);

function setSize(newx, newy) {
    var xchange = newx - cols;
    var ychange = newy - rows;
    if (xchange < 0) {
        console.log('reducing x: ' + xchange);
        for (var x = xchange; x < 0; x++) {
            console.log(x);
            $('#grid-overlay table tbody tr').find('th:last, td:last').remove();
        }
    }
    if (ychange < 0) {
        console.log('reducing y: ' + ychange);
        for (var y = ychange; y < 0; y++) {
            $('#grid-overlay table tbody').find('tr:last').remove();
        }
    }
    if (xchange > 0) {
        console.log('increasing x: ' + xchange);
        $('#grid-overlay').find('tr').each(function(){
            $(this).find('td').eq(-1).after(Array(xchange).join("<td class='eraser' style='width:16px; height:16px;'></td>"));
        });
    }
    if (ychange > 0) {
        console.log('increasing y: ' + ychange);
        for (var y = 1; y <= ychange; y++) {
            var tr = $('<tr></tr>');
            for (var x = 1; x <= newx; x++) {
                var td = $('<td></td>');
                td.css('width', gsize+'px').css('height', gsize+'px');
                td.addClass('eraser');
                tr.append(td);
            }
            tbl.append(tr);
        }
    }

    cols = newx;
    rows = newy;
    src.css('width', cols * gsize+'px').css('height', rows * gsize+'px');
}

$('#resizeChart').click(function() {
    x  = $('#inputWidth').val();
    y  = $('#inputHeight').val();
    setSize(x,y);
});

})();

ここで完全に機能する例を見つけることができますhttp://jsfiddle.net/6Ru72/

問題のあるコードブロックは

    if (xchange > 0) {
        console.log('increasing x: ' + xchange);
        $('#grid-overlay').find('tr').each(function(){
            $(this).find('td').eq(-1).after(Array(xchange).join("<td class='eraser' style='width:16px; height:16px;'></td>"));
        });
    }

デモをいじってみると、y 軸に沿った特定のポイントの後、テーブルの幅だけが増加することがわかります。なぜこの動作が起こっているのか誰にも分かりますか? 問題の画像 http://i.imgur.com/h3d750v.png

4

2 に答える 2

0

問題は

$(this).find('td').eq(-1).after(Array(xchange).join("<td class='eraser' style='width:16px; height:16px;'></td>")); });

xchange適切な繰り返し回数を得るには、値を 1増やす必要があります。

$(this).find('td').eq(-1).after(Array(xchange + 1).join("<td class='eraser' style='width:16px; height:16px;'></td>")); });

このjoin()関数は、(この場合は empty ) 配列の要素を選択した文字列 (この場合はテーブル データの html マークアップ) と結合します。したがって、適切な繰り返し回数を取得したい場合は、回数を 1 ずつ増やす必要があります。

私はあなたのコードにいくつかの変更を加えました (私は基本的にすべてゼロから書きました。申し訳ありませんが、必要に応じて自由に使用してください)。

(function() {

    String.prototype.repeat = function( num )
    {
        return new Array( num + 1 ).join( this );
    }

    var src = $('#grid-source');
    var wrap = $('<div id="grid-overlay"></div>');
    var gsize = 16;

    var td_html = '<td class="eraser" style="width:'+gsize+'px;height:'+gsize+'px"></td>';

    var cols = 32;
    var rows = 32;

    // create overlay
    var tbl = $('<table></table>');

    tbl.html(('<tr>' + td_html.repeat(cols) + '</tr>').repeat(rows));

    src.css('width', cols * gsize+'px').css('height', rows * gsize+'px')

    // attach overlay
    wrap.append(tbl);
    src.after(wrap);

    function setSize(x, y) {
        var x_total = parseInt(x);
        x = x - tbl.find('tr:first td').length;
        y = y - tbl.find('tr').length;

        if(x > 0){
            var html = td_html.repeat(x);
            tbl.find('tr').each(function(){
                $(this).append(html);
            });
        }

        if(x < 0)
            tbl.find('tr').each(function(){
                $(this).find('td').slice(x).remove();
            });

        if(y > 0)
            tbl.append(('<tr>' + td.html.repeat(x_total) + '</tr>').repeat(y));

        if(y < 0)
            tbl.find('tr').slice(y).remove();

        src.css({'width' : tbl.find('tr:first td').length * gsize+'px', 'height':  tbl.find('tr').length+'px'});
    }

    $('#resizeChart').click(function() {
        x  = $('#inputWidth').val();
        y  = $('#inputHeight').val();
        setSize(x,y);
    });

})();

<td>これは、古い要素と要素を保持する必要がある場合にうまく機能します<tr>（それらに保存されているデータなどのため）。ただし、古い行とデータを保持する必要がない場合は、setSize()関数内のすべてのコードを次のように置き換えることができます

tab.html(('<tr>' + ('<td class="eraser" style="width:'+gsize+'px;height:'+gsize+'px"></td>').repeat(parseInt(x))).repeat(parseInt(y)));
于 2013-09-20T00:02:57.607 に答える
0

これを試してください：

$(function() {
    $('#resizeChart').click(function() {     
        var $oldTable = $('#table');   
        var $table = $('<table>').attr('id', 'table');        
        var width = $('#inputWidth').val();
        var height = $('#inputHeight').val();

        for (var row = 0; row < height; row++) {
            var $tr = $('<tr>');            
            for (var column=0; column < width; column++) {
                var $td = $('<td>');
                $td.html(getCellValue($oldTable, row, column));
                $tr.append($td);
            }            
            $table.append($tr);               
        }
        $oldTable.remove();
        $('#grid-source').append($table);
    });
})();

function getCellValue($table, row, col) {
    var $trs = $table.find('tr');
    return $trs.length >= row && $($trs[row]).find('td').length >= col
        ? $($($trs[row]).find('td')[col]).html() : '';
}

ここで働いています

フィドル

于 2013-09-19T22:52:35.227 に答える