Javascript: modify function to create table dynamically

StackOverflow https://stackoverflow.com/questions/19617163

Question

I am pretty new to JavaScript and would like to use a function to insert a table into a form. So far I have the following code (working - except for the header) but am struggling with the following:

1) How can I use a prompt (popup) to ask for the needed table instead of using input fields like I have ? 2) How can I include the width (in %) here ? 3) How can I always add a table header ?

I hope someone here can help me to understand this.

My Code: 

<html>
<head>
<script type="text/javascript">
    function insertTable()
    {
        var num_rows = document.getElementById('rows').value;
        var num_cols = document.getElementById('cols').value;
        var theader = "<table id='table1'><thead></thead>";
        var tbody = "";

        for(var i = 0; i < num_rows; i++)
        {
            tbody += "<tr>";
            for(var j = 0; j < num_cols; j++)
            {
                tbody += "<td>";
                tbody += "?";
                tbody += "</td>"
            }
            tbody += "</tr><br />";
        }
        var tfooter = "</table>";
        document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
    }
</script>
<style>
    #table1
    {
        border:solid 1px;
        border-collapse:collapse;
        width:100%;
    }

    #table1 td
    {
        border:solid 1px;
        vertical-align:middle;
    }
</style>
</head>
<body>
    <form name="tableForm">
        <label>Rows: <input type="text" name="rows" id="rows"/></label><br />
        <label>Cols: <input type="text" name="cols" id="cols"/></label><br />
        <label>Width (%): <input type="text" name="width" id="width"/></label><br />
        <button type="button" onclick="insertTable()">Create Table</button>
        <div id="wrapper"></div>
    </form>
</body>
</html>

Thanks for any help with this, Tim

Was it helpful?

Solution

I have added few changes in the JS and CSS in your code. This would give you the header for each column and also will set the width of table in %

To display the form in the pop-up, you can use any jquery plugin. The best jq plugin for pop-up is jquery-lightbox-me

<html>
<head>
<script type="text/javascript">
function insertTable()
{
    var num_rows = document.getElementById('rows').value;
    var num_cols = document.getElementById('cols').value;
    var width = document.getElementById('width').value;
    var theader = "<table id='table1' width = ' "+ width +"% '>";
    var tbody = "";

    for(var j = 0; j < num_cols; j++)
    {
      theader += "<th>header col "+ (j+1) +" </th>";
    }

    for(var i = 0; i < num_rows; i++)
    {
        tbody += "<tr>";
        for(var j = 0; j < num_cols; j++)
        {
            tbody += "<td>";
            tbody += "?";
            tbody += "</td>"
        }
        tbody += "</tr><br />";
    }
    var tfooter = "</table>";
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
</script>
<style>
#table1
{
    border:solid 1px;
    border-collapse:collapse;
}

#table1 th
{
    border:solid 1px;
    border-collapse:collapse;
}

#table1 td
{
    border:solid 1px;
    vertical-align:middle;
}
</style>
</head>
<body>
<form name="tableForm">
    <label>Rows: <input type="text" name="rows" id="rows"/></label><br />
    <label>Cols: <input type="text" name="cols" id="cols"/></label><br />
    <label>Width (%): <input type="text" name="width" id="width"/></label><br />
    <button type="button" onclick="insertTable()">Create Table</button>
    <div id="wrapper"></div>
</form>
</body>
</html>

Hope this would help you.

Thanks

OTHER TIPS

Let say I have a CSV, It should work 

Header1,Header2,Header3
1,2,3
4,5,6



        var data = evt.target.result;
        var delimiter = ',';
        var escape = '\n';
        var rows = data.split(escape);
        var tbl = document.createElement('table');
        tbl.style.width = '100%';
        //tbl.setAttribute('border', '1', "green");
        tbl.className = "table table-hover table-condensed dataTable";
        var tbdy = document.createElement('tbody');


        for (index in rows) {
            var tr = document.createElement('tr'); // creating new row 
            var items = rows[index].split(delimiter);
            for (itemindex in items) {
                var td = "";
                if (index == 0) {
                    td = document.createElement('th');
                } else {
                    td = document.createElement('td');
                }

                td.appendChild(document.createTextNode(items[itemindex])); // creating new cell 
                tr.appendChild(td); // add to current tr
            }

            tbdy.appendChild(tr); // add new row (tr) to table 
        }
        tbl.appendChild(tbdy);

        document.getElementById('byte_content').appendChild(tbl);

Have a look at JQuery and the show() / hide() functions. You can use 'real' javascript-popups, but some browsers/browser-configurations won't open the new tab/window. Summing up, think about your use case, create all necessary div-containers and show exactly one div container on your page. You can find more about JQuery here http://www.w3schools.com/jquery/jquery_hide_show.asp and of course here http://api.jquery.com/show/. You are able to change the table-attributes and corresponding css with JQuery-functions as well.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top