Creating dynamic tables using javascript, given rows and column in textboxes

Question

I am back with a problem again (please cooperate with my silly questions, i am very new to JavaScript). I am trying for understanding the concept of dynamic tables in JavaScript. Of course i went through Google, but unable to understand the concept :(

What I have is two text boxes (tb1, tb2) for entering number of rows & number of columns respectively. So when I click on the button (b1), it should create the table as per given number of rows and columns in the text boxes. This is what I know so far..

<script type = "text/javascript">

function createTable(){
var a = document.getElementById("tb1").value;
var b = document.getElementById("tb2").value;

    if(a=="" || b==""){
        alert("Please enter some numeric value");
        }else{
        .......the creating table code goes here.....   

        }
    }

}

</script>

I will be calling createTable function in button onClick="createTable()". Any help is most appreciated.

micadelli · Accepted Answer · 2012-06-27 11:20:59Z

1

JS

function createTable() {
    var a, b, tableElem, rowElem, colElem;

    a = document.getElementById('tb1').value;
    b = document.getElementById('tb2').value;

    if (a == "" || b == "") {
        alert("Please enter some numeric value");
    } else {
        tableElem = document.createElement('table');

        for (var i = 0; i < a; i++) {
            rowElem = document.createElement('tr');

            for (var j = 0; j < b; j++) {
                colElem = document.createElement('td');
                colElem.appendChild(document.createTextNode(j + 1)); //to print cell number
                rowElem.appendChild(colElem);
            }

            tableElem.appendChild(rowElem);
        }

        document.body.appendChild(tableElem);


    }
}

JSFiddle
http://jsfiddle.net/mprRb/1/

edited Jun 27, 2012 at 11:20

answered Jun 27, 2012 at 10:37

micadelli

2,4926 gold badges26 silver badges38 bronze badges

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

3 Comments

jsborn17 Over a year ago

can you please explain below: colElem.appendChild(document.createTextNode(j + 1)); rowElem.appendChild(colElem); wat does appendChild and createTextNode does here?

jsborn17 Over a year ago

@micadelli- thank you, it works but i got result giving me the numbers, would you please share the code how i can draw table having borders?

micadelli Over a year ago

@jsborn17 I updated the JSFiddle code. document.createTextNode just creates a text node, ie. inserts text to colElem, in my example code. You can create border with CSS. Check my JSFiddle for simple example

Ashwin Singh · Accepted Answer · 2012-06-27 10:04:10Z

Here is your function:

function createTable(){
    var a = document.getElementById("tb1").value;
    var b = document.getElementById("tb2").value;

        if(a=="" || b==""){
            alert("Please enter some numeric value");
            }else{


            row=new Array();
        cell=new Array();

        row_num=parseInt(a); //edit this value to suit
        cell_num=parseInt(b); //edit this value to suit

        tab=document.createElement('table');
        tab.setAttribute('id','newtable');

        tbo=document.createElement('tbody');

        for(c=0;c<row_num;c++){
        row[c]=document.createElement('tr');

        for(k=0;k<cell_num;k++) {
        cell[k]=document.createElement('td');
        cont=document.createTextNode((c+1)*(k+1))
        cell[k].appendChild(cont);
        row[c].appendChild(cell[k]);
        }
        tbo.appendChild(row[c]);
        }
        tab.appendChild(tbo);
        document.getElementById('mytable').appendChild(tab);//'myTable' is the parent control of your table, change it as per your requirements
                }
            }

        }

Add this attribute to your button b1 onclick="createTable();"

Th0rndike · Accepted Answer · 2012-06-27 11:57:06Z

1

here's another solution using innerHTML

<script type = "text/javascript">

function createTable(){

var a = document.getElementById("tb1").value;
var b = document.getElementById("tb2").value;
var resultTable = '<table>';

if(a=="" || b==""){
    alert("Please enter some numeric value");
    }else{
         for(var i=0;i<parseInt(a);i++){
              resultTable += '<tr>';
              for (var j=0;j<parseInt(b);j++)
                   resultTable +='<td><\/td>';
              }
              resultTable +='<\/tr>';

         }
    resultTable+='<\/table';
    }
    return resultTable;

}

</script>

after that, just add the result to whatever element you want using innerHTML, for example, if you have:

<div id='myElement'></div>

then you can add the table to the element (inside any js function) like this:

var targetElement = document.getElementById('myElement');
targetElement.innerHTML = createTable();

otherwise, you can just delete the line:

return resultTable;

and add the table to the element directly inside the function, like this:

var target = document.getElementById('myElement');
target.innerHTML=resultTable;

edited Jun 27, 2012 at 11:57

answered Jun 27, 2012 at 10:11

Th0rndike

3,4363 gold badges25 silver badges43 bronze badges

1 Comment

jsborn17 Over a year ago

Thanks, i tried this as well, correct me if i am wrong - the innerHTML code will be used just after the function closes. Also, my button id is 'b1', this will be used on place of 'myElement' right?

Collectives™ on Stack Overflow

Creating dynamic tables using javascript, given rows and column in textboxes

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related