Fiddle

Question

我正在创建一个表格，其中有人可以输入宽度和高度，它将被重新设置为x单位ov 16x16 td＆＃39; s

我已经让它正常工作，只有当我增加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

Answer 1

请试试这个：

$(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() : '';
}

以下是

Fiddle

Answer 2

问题在于

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

要获得正确的重复次数，您必须将xchange值增加一个：

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

join()函数使用您选择的字符串连接（在本例中为空）数组的元素，在本例中为表数据的html标记。因此，如果你想获得正确数量的重复，你必须将数字增加一个。

我对你的代码做了一些修改（我基本上是从头开始写的，对不起，如果你愿意，可以随意使用它）。

(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)));

使用jquery动态调整表大小

2 个答案:

Fiddle