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

试试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 回答
0

变量“k”未在 genTable() 中定义。Javascript 具有函数范围，因此在 readGrad() 中定义的“k”在 genTable() 中不可用。

于 2012-05-11T18:36:06.453 回答