Print a table inside a div with given row and column via Javascript

Question

I have two textfield and one button. When user clicked the button, It calls a function and print a table inside a div with given number of rows and columns.

You can see my code below, but this is not working as expected.

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>");     

    }

"this is not working as expected": what do you expect it to do? What do you get instead? I see you are new. Remember: the more details you give, the easier you will get a reply and an accurate answer. — pasine
– pasine, Commented Dec 27, 2013 at 13:30

Mister Epic · Accepted Answer · 2013-12-27 13:30:28Z

1

You need to remember to

A) Close your table row and table cell elements

B) Concatenate the value of the table markup, as you are currently overwriting your changes with each assignment

    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;

answered Dec 27, 2013 at 13:30

Mister Epic

16.8k13 gold badges88 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniele Over a year ago

Thank's for your attention and your time!

A Paul Over a year ago

Sorry. About to give you +1 but by mistake. My bad !

A Paul · Accepted Answer · 2013-12-27 13:39:57Z

0

Try some thing this. Use a avariable add all string in to it and then set innerhtml. Als oyou are not closing the 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;     

    }

edited Dec 27, 2013 at 13:39

answered Dec 27, 2013 at 13:28

A Paul

8,3113 gold badges33 silver badges65 bronze badges

2 Comments

Mister Epic Over a year ago

You might want to close the table cell elements as well.

Daniele Over a year ago

I do it now. It's a mine bad habit

Collectives™ on Stack Overflow

Print a table inside a div with given row and column via Javascript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related