Question

我尝试根据用户输入动态生成表。这个想法是让用户插入行数，并自动生成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/

Answer 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/

Answer 2

使用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');

Answer 3

变量'k'未在genTable（）中定义。 Javascript具有函数范围，因此readGrad（）中定义的'k'在genTable（）中不可用。

Answer 4

尝试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/jnerator/PCrKZ/

使用JavaScript的动态表生成器

4 个答案: