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.

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