Question

56

Javascript: modify function to create table dynamically

rated 0 times [ 61] [ 5] / answers: 1 / hits: 18179 / 11 Years ago, sun, october 27, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

katharinek

Add To Favorites

Follow

Total Points: 302

Total Questions: 105

Total Answers: 123

Location: Austria

Member since Thu, Jan 7, 2021

3 Years ago

answered 11 Years ago yaquelina · Accepted Answer

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