SPREAD SHEET

Jonax · December 1st, 2004, 05:01 PM

Your code with the above three changes applied:

Code:

<html>
    <head>
        <title></title>
        <script>

            function createTable(nRows, nCol)
            {
                //alert(nRows + " " +  nCol);
                var oDiv;
                oDiv = document.getElementById("tblDiv");


                if(nRows > 0 && nCol >0)
                {
                    // create table
                    var oTable = document.createElement("table");

                    oTable.border=0;
                    oTable.cellSpacing=1;
                    oTable.cellPadding=1;

                    // table body
                    var oTBody = document.createElement("tbody");
                    oTable.appendChild(oTBody);

                    // TR

                    for (var i=0; i<nRows; i++)
                    {
                        var oTR = document.createElement("tr");
                        oTBody.appendChild(oTR);


                    // TD    
                        for (var j = 0; j<nCol; j++)
                        {
                        // Unique id
                            var nCount = (i * nCol) + j    

                            var oTD1 = document.createElement("td");
                            oTD1.innerHTML = "<input type='text' id='" + nCount + "'/>";
                            oTR.appendChild(oTD1);


                        }


                    }

                alert(oTable.outerHTML);
//                oDiv.appendChild(oTable);
//                document.write(oDiv.outerHTML)    
                oDiv.innerHTML = oTable.outerHTML;
                frmCreate.txtRows.value = "";
                frmCreate.txtColumns.value = "";
                }

            }            


      </script>

    </head>
    <body>
        <form action="" name="frmCreate" ID="frmCreate">
            <table id="tblCreate">
                <tr>
                    <td>Number of Rows: <input type="text" id="txtRows" NAME="txtRows" value=""></td>
                    <td>Number of columns: <input type="text" id="txtColumns" NAME="txtColumns" value=""></td>

                </tr>
                <tr>
                    <td><input type="button" onclick="createTable(document.frmCreate.txtRows.value, document.frmCreate.txtColumns.value)" value="Create Table" id="button1" name="button1"></input>&nbsp;
                        <input type="button" onclick="alert(tblCreate.innerHTML)" value="INNERHTML" id="button2" name="button2"></input></td>
                </tr>
            </table>

            <div id="tblDiv">

            </div>

        </form>
    </body>
</html>

pallone · December 2nd, 2004, 07:15 AM

Hi Jonax,

I have really appreciated your help.

The way you did the unique id is really clever. Well done!!:)

There is one problem however, if the user by accident clicks the refresh button in the browser, the table will be cleared i.e. the table will disappear from the screen. Suppose the user had already typed some number there, he/she would loose everything. Is there a way to avoid that and maintain the state??

Also:

1 - How can I loop through both the first, second, etc rows and first, second, etc... columns? Suppose the columns represented the days of the week and the rows the name of the shop and the value entered the daily income. What I want to be able to do is to add all the values in the first column (Monday) to have a total for Monday. Then add the values of only second column to have a total for Tuesday.

Similarly, I need to be able to add the values in the first row for a particular shop then the values of the second row (Monday + Tuesday + Wednesday + ....) for the other shop and so on.

Finally, I need to be able to produce an average of sales based on days of week (each column separately) and per shop (each row separately).

I would really appreciate if someone could help with that.

Cheers,

Claudio

rweide · June 27th, 2005, 10:36 AM

maybe you don't need this anymore or probably you have to use Javascript and nothing else.

But I am using Microsoft's Office Web Components (OWC), which provides spreadsheet, pivot table, chart, and a data source control. You can read about it. No much code is needed to do that.