1

我正在创建一个表格，有人可以在其中输入宽度和高度，它将被调整为 x 单位 ov 16x16 td'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

4

2 回答 2

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 回答
0

问题出在

$(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)));
于 2013-09-20T00:02:57.607 回答