Question

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

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

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

Answer 1

你去：

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

希望有所帮助。

Answer 2

修改了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>

我想通过按行数和列数给出输入来创建需要显示表行和列的HTML页面

2 个答案: