javascript - 我想通过按行数和列数提供输入来创建需要显示表格行和列的 HTML 页面

Question

我将创建 2 个标签及其 2 个文本框。通过输入值，它必须给我行和列的相应输出。

如果我输入 2 作为行和 3 作为列.. 输出将是 2 行和 3 列..

我很困惑如何在这里使用javascript..请帮忙

Answer 1

修改了 Gal V 的答案......使用输入而不是提示...... jsFiddle

<style type="text/css">
td{min-width:100px;min-height:20px;border:solid 1px #000;}
</style>

<script type="text/javascript">
function createTable() {
 document.getElementById('tb_container').innerHTML = "" ;
    var rows  = document.getElementById('tb_rows').value;
     var cols  = document.getElementById('tb_cols').value;

    tblHtml = '<table>'
    for (i=0; i<rows; i +=1 ) {
        tblHtml += '<tr>';
        for (j=0; j<cols; j +=1 ) {
         tblHtml += '<td>&nbsp;</td>';
        }
          tblHtml += '</tr>';
    }
    tblHtml += '</table>';
    document.getElementById('tb_container').innerHTML = tblHtml;
}
</script>

以您自己的方式设置以下代码的样式...

Rows:<input type="text" id="tb_rows" > <br>
Columns : <input type="text" id="tb_cols" >
<input type="button" value="Create Table" onclick="createTable()" > 

<div id="tb_container" ></div>

Answer 2

干得好：

<style type="text/css">
td{min-width:100px;min-height:20px;border:solid 1px #000;}
</style>

<script type="text/javascript">
window.onload = function() {
    document.getElementById('btnCreate').addEventListener('click', function(){
        var rows = parseInt(document.getElementById('txtRows').value),
            cols = parseInt(document.getElementById('txtCols').value);
        create(rows,cols);
    });
}

function create(rows, cols) {
    if (rows <= 0 || cols <= 0)
        return false;

    var html = '<table>';
    for (i=0;i<rows;i++) {
        html += '<tr>';
        for (j=0;j<cols;j++) {
            html += '<td>&nbsp;</td>';
        }
        html += '</tr>';
    }
    html += '</table>';
    document.getElementsByTagName('body')[0].innerHTML = html;
}
</script>

rows: <input type="text" id="txtRows" /><br/>
cols: <input type="text" id="txtCols" /><br/>
<input type="button" value="create table" id="btnCreate" />

希望有帮助。