Question

我有两个文本字段和一个按钮。当用户单击该按钮时，它调用一个函数并在div中打印一个具有给定行数和列数的表。

您可以在下面看到我的代码，但这不能按预期工作。

HTML

    Rows <input type="text" id="rows">
    Columns <input type="text" id="columns">

    <input type="button" value="Create Table" onClick="printTable();">

    <div id="box"></div>

的Javascript

    function printTable()
    {
        var nRows=document.getElementById("rows");
        var nColumns=document.getElementById("columns");
        var spaceofDiv=document.getElementById("box");

        spaceofDiv.innerHTML=("<table border=1>");
        for(i=0; i<nRows.value; i++)
        {
            spaceofDiv.innerHTML=("<tr>");
            for(j=0; j<nColumns.value; j++)
            {    
                spaceofDiv.innerHTML=("<td width=50 height=50>&nbsp;");
            }
        }
        spaceofDiv.innerHTML=("</table>");     

    }

Answer 1

你需要记住

A）关闭表行和表格单元格

B）连接表格标记的值，因为您当前正在使用每个作业覆盖您的更改

    var markup = '';
    markup = "<table border=1>";
    for(i=0; i<nRows.value; i++)
    {
        markup += "<tr>";
        for(j=0; j<nColumns.value; j++)
        {    
            markup += "<td width=50 height=50>&nbsp;</td>";
        }
        markup += "</tr>";
    }
    markup = "</table>";     

    spaceofDiv.innerHTML = markup;

Answer 2

尝试一下这件事。使用变量将所有字符串添加到其中，然后设置innerhtml。您也没有关闭tr

function printTable()
    {
        var nRows=document.getElementById("rows");
        var nColumns=document.getElementById("columns");
        var spaceofDiv=document.getElementById("box");
        var tableStr = "";
        tableStr =("<table border=1>");
        for(i=0; i<nRows.value; i++)
        {
            tableStr +="<tr>";
            for(j=0; j<nColumns.value; j++)
            {    
                tableStr +="<td width=50 height=50></td>&nbsp;";
            }
            tableStr +="</tr>"; 
        }
        tableStr  += "</table>"
        spaceofDiv.innerHTML=tableStr;     

    }

通过Javascript在给定行和列的div内打印一个表

2 个答案: