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

Jsフィドル

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