Question

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

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

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

1 个答案: