我目前正在尝试使用JS和HTML动态创建表。

但是目前看来,它似乎无法从用户输入中检索值。

我做错了什么?

提前致谢!

<script type="text/javascript">
function createTable(num_rows, numcols)
{
    var num_rows = document.tablegen.rows.value;
    var num_cols = document.tablegen.cols.value;
    var theader = '<table>\n';
    var tbody = '';

    for( var i=0; i<num_rows;i++)
    {
        // create each row
        tbody += '<tr>';

    for( var j=0; j<num_cols;j++)
    {
        // create cell
        tbody += '<td>';
        tbody += 'Cell ' + i + ',' + j;
        tbody += '</td>'
    }

    // closing row table
    tbody += '</tr>\n';

    }

    var tfooter = '</table>';

    // TO DO

    return theader + tbody + tfooter;
}
</script>
</head>

<body>
<form name="tablegen">
<label>Rows: <input type="text" name="rows"/></label><br />
<label>Cols: <input type="text" name="cols"/></label><br/>
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/>
</form>
<script type="text/javascript">
document.write(createTable());
</script>

最佳答案

我不建议使用document.write。读这个

Why is document.write considered a "bad practice"?

试试这个:

<script type="text/javascript">
function createTable()
{
    var num_rows = document.getElementById('rows').value;
    var num_cols = document.getElementById('cols').value;
    var theader = '<table border="1">\n';
    var tbody = '';

    for( var i=0; i<num_rows;i++)
    {
        tbody += '<tr>';
        for( var j=0; j<num_cols;j++)
        {
            tbody += '<td>';
            tbody += 'Cell ' + i + ',' + j;
            tbody += '</td>'
        }
        tbody += '</tr>\n';
    }
    var tfooter = '</table>';
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
</script>
</head>

<body>
<form name="tablegen">
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
<label>Cols: <input type="text" name="cols" id="cols"/></label><br/>
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/>
</form>

<div id="wrapper"></div>

您还可以使用insertRowinsertCell

阅读更多:

https://developer.mozilla.org/en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_insertrow

关于javascript - 用用户输入动态创建表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8182608/

10-11 05:10