Dynamic table generator with JavaScript

Question

I try to generate a table dynamically, based on an user input. The idea is for the user to insert the number of rows and the html is generated automatically.

I have made some code and debugged it with jslint, however it does not work, although in jslint there are no significant errors. What am I doing wrong?

The code is as follows:

<body style="background-color: #777; color: ddd;">
    <div style="margin: 20px;">
        <h1>Program de calculare determinant matrice de orice grad.</h1>
    </div>
    <div>
        Introduceti gradul matricii
        <input id="grad" type="text" value="" onChange="readGrad ()" >            
        <input style="margin-top: 20px;" type="button" name="Calculate determinant" value="Generati tabel" onClick="genTable (k,k)">
    </div>
    <form name="Det Matrice">
        <div style="margin-top: 100px; float: left; width: 100%;">
            Introduceti valorile:
            <table style="text-align: center;">
                <tr id="container"></tr>
            </table>
            <br>
        </div>
        <div style="float: left; margin-top: 20px;">            
            <input type="button" name="Calculate determinant" value="Calculati determinant" onClick="calcDet (k,k);">
        </div>
    </form>    
</body>

<script>
function readGrad() {
    var k = parseInt(document.getElementById("grad").value);
    if (isNaN(k)) {
        alert('Gradul introdus nu este intreg, reintroduceti gradul matricii');
    }
}

function genTable(i, j) {
    var myTable = '<TABLE BORDER="1">\n <TBODY>\n';
    for (i = 0; i < k; i++) {
        myTable += '  <TR>\n';
        for (j = 0; j < k; j++) {
            myTable += '    <TD> @ </TD>\n';
        }
        myTable += '  </TR>\n';
    }
    myTable += ' </TBODY>\n</TABLE>\n';
    document.getElementById('container').innerHTML = myTable;
}
</script>

it can also be checked here: http://jsfiddle.net/pYc4P/18/

mgraph · Accepted Answer · 2012-05-11 19:02:50Z

1

instead of onClick="calcDet (k,k);"> do onClick="genTable(k,k);">

then :

var k;
function readGrad() {
    k = parseInt(document.getElementById("grad").value);
    if (isNaN(k)) {
        alert('Gradul introdus nu este intreg, reintroduceti gradul matricii');
    }
}

instead of :

  <table style="text-align: center;">
        <tr id="container"></tr>
    </table>

do <div id="container"></div>

demo : http://jsfiddle.net/pYc4P/20/

edited May 11, 2012 at 19:02

answered May 11, 2012 at 18:38

mgraph

15.3k4 gold badges43 silver badges76 bronze badges

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

1 Comment

viktor Over a year ago

The ideea is to generate a table not k+k cols.

Nick Babcock · Accepted Answer · 2012-05-11 20:08:13Z

1

Use jQuery!

If you don't know what jQuery is, it's a javascript library used to simplify cross browser html editing and other great features. You don't have to worry about html string manipulation, anymore. I know you wrote your code in javascript, but here is the jQuery code that will do as you ask.

<body>
    <input id="numtxt"/>
    <button id="tableGenerateBtn">Submit</button>
    <table id="mainTable">
    </table>

    <script type="text/javascript">
        $(document).ready(function()
        {
            $('#tableGenerateBtn').click(function()
            {
                //Get value stored in textbox and make sure it's a number
                var square = $('#numtxt').val();
                if (square != Number.NaN)
                {
                    var tableBody = $(document.createElement('tbody'));    
                    var row = $(document.createElement('tr'));

                    //Create a prototype of the type of cell we want
                    //In each cell we shall display the text "Cell"
                    var cell = $(document.createElement('td')).html('Cell');    

                    for (var i = 0; i < square; i++)
                    {
                        var newRow = row.clone();
                        tableBody.append(newRow);
                        for (var j = 0; j < square; j++)
                            newRow.append(cell.clone());
                    }
                    $('#mainTable').append(tableBody);
                }
            });
        });
    </script>
</body>

In the future, applying css styles to new elements is a piece of cake.

//If you had a css class MyStyle that you wanted to add to all cells
//it's as easy as changing
var cell = $(document.createElement('td')).html('Cell'); 
//to
var cell = $(document.createElement('td')).addClass('MyStyle').html('Cell');

edited May 11, 2012 at 20:08

answered May 11, 2012 at 18:38

Nick Babcock

6,1563 gold badges29 silver badges47 bronze badges

2 Comments

viktor Over a year ago

I have done that in the original file. It still does not work.

Nick Babcock Over a year ago

I changed my answer to use jQuery. I realize that you want javascript, but when creating elements, jQuery makes your life so much easier!

evanwong · Accepted Answer · 2012-05-11 18:36:06Z

0

The variable 'k' is not defined in genTable(). Javascript has function scope so the 'k' defines in readGrad() is not available in genTable().

answered May 11, 2012 at 18:36

evanwong

5,1543 gold badges34 silver badges45 bronze badges

4 Comments

viktor Over a year ago

Why is that? I have tried with k as a global variable and it did not worked, besides jlint does not show any such errors.

evanwong Over a year ago

Base on your code, k is not a global variable. And jsfiddle actually is throwing error if you look at the browserconsole: Uncaught ReferenceError: k is not defined

viktor Over a year ago

defined var k; at the start in the original code and in jsfiddle, it still does not work

evanwong Over a year ago

See this: jsfiddle.net/uVNcs Removed the table in your original html code and use <div id="container"> instead.

Berezh · Accepted Answer · 2012-09-30 22:19:26Z

0

Try Jnerator

function updateTable() {
    var rows = 0 + tagRows.value;
    var cols = 0 + tagCols.value;

    var jtable = $j.table({ class: 'my-table' });
    for (var i = 0; i < rows; i++) {
        var jrow = $j.tr();
        for (var j = 0; j < cols; j++) {
            jcol = $j.td('row: ' + i + '; col: ' + j);
            jrow.child.add(jcol);
        }
        jtable.child.add(jrow);
    }
    tagContainer.innerHTML = jtable.html();
}

See example: http://jsfiddle.net/jnerator/PCrKZ/

answered Sep 30, 2012 at 22:19

Berezh

9379 silver badges12 bronze badges

Collectives™ on Stack Overflow

Dynamic table generator with JavaScript

4 Answers 4

1 Comment

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related