jquery - 使用带有 jquery 的输入范围动态创建表

Question

任何人都可以解释我，为什么当我使用 5 列和 5 行的输入范围设置表时，然后，当我将更改大小行时，例如更改为 3 行，接下来所有表都将为空，然后我必须更改如果我的表是 3 行，则再值一次。当行是常量时，我​​只使用输入范围设置列，一切正常。

http://jsfiddle.net/Efxba/

Answer 1

首先添加value="5"到每个input type="range"具有默认值。

然后在$('#rows').changed调用函数结束$('#cols').changed();时，在表行数发生变化时用列填充行。

最后在文档准备好时添加到$(document).ready函数$('#rows').changed();调用以更新表。

提琴手

HTML：

<input type="range" id="rows" name="rows" min="0" max="10" value="5" />
<input type="range" id="cols" name="cols" min="0" max="10" value="5" />

JavaScript：

$(document).ready(function() {
    var wartosc;
    var wartosc2;
    var i = 0;
    var j = 0;

    $('#rows').change(function() {
        $('table tr').remove();              
        //alert(document.body.innerHTML);
        var newVal = this.value;
        wartosc = newVal;
        $('#newValue').html(newVal);

        $("table ").each(function () {
            for (i = 0; i < wartosc; i++) {
                $(this).append('<tr>');                        
            }
        });
        $('#cols').change()
    });

    $('#cols').change(function() {
        $('table td').remove();
        var newVal = this.value;
        wartosc2 = newVal;
        $('#newValue2').html(newVal);
        $("table tr").each(function() {
            for (j = 0; j < wartosc2; j++) {
                $(this).append('<td>asdad</td>');
            }
        });
    });
    $('#content').append('<table border="1"></table>');
    var table = $('#content').children();
    $('#rows').change();
});