1

ユーザー入力に基づいて、動的にテーブルを生成しようとしています。ユーザーが行数を挿入すると、HTMLが自動的に生成されるという考え方です。

いくつかのコードを作成し、jslintでデバッグしましたが、jslintには重大なエラーはありませんが、機能しません。私は何が間違っているのですか？

コードは次のとおりです。

<body style="background-color: #777; color: ddd;">
    <div style="margin: 20px;">
        <h1>Program de calculare determinant matrice de orice grad.</h1>
    </div>
    <div>
        Introduceti gradul matricii
        <input id="grad" type="text" value="" onChange="readGrad ()" >            
        <input style="margin-top: 20px;" type="button" name="Calculate determinant" value="Generati tabel" onClick="genTable (k,k)">
    </div>
    <form name="Det Matrice">
        <div style="margin-top: 100px; float: left; width: 100%;">
            Introduceti valorile:
            <table style="text-align: center;">
                <tr id="container"></tr>
            </table>
            <br>
        </div>
        <div style="float: left; margin-top: 20px;">            
            <input type="button" name="Calculate determinant" value="Calculati determinant" onClick="calcDet (k,k);">
        </div>
    </form>    
</body>

<script>
function readGrad() {
    var k = parseInt(document.getElementById("grad").value);
    if (isNaN(k)) {
        alert('Gradul introdus nu este intreg, reintroduceti gradul matricii');
    }
}

function genTable(i, j) {
    var myTable = '<TABLE BORDER="1">\n <TBODY>\n';
    for (i = 0; i < k; i++) {
        myTable += '  <TR>\n';
        for (j = 0; j < k; j++) {
            myTable += '    <TD> @ </TD>\n';
        }
        myTable += '  </TR>\n';
    }
    myTable += ' </TBODY>\n</TABLE>\n';
    document.getElementById('container').innerHTML = myTable;
}
</script>

こちらでも確認できます：http： //jsfiddle.net/pYc4P/18/

4

4 に答える 4

1

onClick="calcDet (k,k);">する代わりにonClick="genTable(k,k);">

それから ：

var k;
function readGrad() {
    k = parseInt(document.getElementById("grad").value);
    if (isNaN(k)) {
        alert('Gradul introdus nu este intreg, reintroduceti gradul matricii');
    }
}

それ以外の ：

  <table style="text-align: center;">
        <tr id="container"></tr>
    </table>

行う<div id="container"></div>

デモ： http： //jsfiddle.net/pYc4P/20/

于 2012-05-11T18:38:21.100 に答える
1

jQueryを使用してください！

jQueryが何であるかわからない場合は、クロスブラウザのhtml編集やその他の優れた機能を簡素化するために使用されるjavascriptライブラリです。HTML文字列の操作について心配する必要はもうありません。あなたがjavascriptでコードを書いたことは知っていますが、これがあなたが求めるように機能するjQueryコードです。

<body>
    <input id="numtxt"/>
    <button id="tableGenerateBtn">Submit</button>
    <table id="mainTable">
    </table>

    <script type="text/javascript">
        $(document).ready(function()
        {
            $('#tableGenerateBtn').click(function()
            {
                //Get value stored in textbox and make sure it's a number
                var square = $('#numtxt').val();
                if (square != Number.NaN)
                {
                    var tableBody = $(document.createElement('tbody'));    
                    var row = $(document.createElement('tr'));

                    //Create a prototype of the type of cell we want
                    //In each cell we shall display the text "Cell"
                    var cell = $(document.createElement('td')).html('Cell');    

                    for (var i = 0; i < square; i++)
                    {
                        var newRow = row.clone();
                        tableBody.append(newRow);
                        for (var j = 0; j < square; j++)
                            newRow.append(cell.clone());
                    }
                    $('#mainTable').append(tableBody);
                }
            });
        });
    </script>
</body>

将来的には、cssスタイルを新しい要素に適用するのは簡単なことです。

//If you had a css class MyStyle that you wanted to add to all cells
//it's as easy as changing
var cell = $(document.createElement('td')).html('Cell'); 
//to
var cell = $(document.createElement('td')).addClass('MyStyle').html('Cell');
于 2012-05-11T18:38:46.507 に答える
0

変数'k'はgenTable（）で定義されていません。Javascriptには関数スコープがあるため、readGrad（）で定義されている「k」はgenTable（）では使用できません。

于 2012-05-11T18:36:06.453 に答える
0

Jneratorをお試しください

function updateTable() {
    var rows = 0 + tagRows.value;
    var cols = 0 + tagCols.value;

    var jtable = $j.table({ class: 'my-table' });
    for (var i = 0; i < rows; i++) {
        var jrow = $j.tr();
        for (var j = 0; j < cols; j++) {
            jcol = $j.td('row: ' + i + '; col: ' + j);
            jrow.child.add(jcol);
        }
        jtable.child.add(jrow);
    }
    tagContainer.innerHTML = jtable.html();
}

例を参照してください：http：//jsfiddle.net/jner​​ator /PCrKZ/

于 2012-09-30T22:19:26.343 に答える