Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old November 23rd, 2004, 12:13 PM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default SPREAD SHEET

Hi,

I need to create a html page has more or less the same look and feel of a excel spread sheet. The users need to be able to enter numbers in the cells and then I might have to do some calculations based on those numbers.

I was wondering if someone has ever done that with javascript before and if so could you please post some sample code?

Cheers,

Claudio

Reply With Quote
  #2 (permalink)  
Old November 24th, 2004, 05:30 PM
Friend of Wrox
 
Join Date: Oct 2004
Location: delhi, delhi, India.
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

Hi pallone,

For that you have to create TextBox either using javascript DOM,or custome Html input text box.then you will have to use OnChage,OnBlur and OnFocus Events.to manipulate these cells.

Cheers
:)




vinod
Reply With Quote
  #3 (permalink)  
Old November 25th, 2004, 08:03 PM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi vinod,

I really appreciated your help. It is the first time I submit a question in this forum and your reply was quite fast.

Since I am new to javascript, I was wondering if you could show an example of how to use the DOM to create the text boxes and how to use the OnChage,OnBlur and OnFocus Events you mentioned in your reply.

I have bought a javascript book called javascript in ease steps but I could not find anything similar to what you mentioned there. Therefore, I would appreciate if you could elaborate a bit more on your reply and provide a simple example just for me to get the idea,

Cheers,

Claudio

Reply With Quote
  #4 (permalink)  
Old November 25th, 2004, 09:36 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

You won't find anything that advanced in JavaScript in Easy Steps - it's a book for beginners. This is a really advanced topic.

AFAIK, nothing has ever been done like this before; there has never really been a reason to do it that I know of.

That inevitably brings up the question: Why do you need to do it? :-)

Perhaps there is an easier, less full-fledged way to do what you need.

EDIT: if you really want a full-blown JavaScript spreadsheet simulator, there are a surprising amount of results for "javascript spreadsheet" similar to what you seem to be looking for.

Elaborate on your purpose, and perhaps someone will be able to cook something up ;)

-Snib
Where will you be in 100 years?
Try new FreshView 0.2!
Reply With Quote
  #5 (permalink)  
Old November 26th, 2004, 09:18 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi Snib / Snib

I have done a search and found some examples that can get me start. I will start coding a simple appl that creates table rows and columns dynamically as the user needs them and will add textboxes inside the tds as suggested by Snib.

As soon as I finish this I will post the code for you to see. I am sure I will need some help when it comes to the events. Also I know how to create a loop in javascript but I am not sure how to loop through the table specific rows and columns i.e. suppose I want to loop through the first column of the table, then the second column and then the 10th column?? add all numbers and calculate the average??

I may also need to loop the rows like the first row, then second row then 5th row and then add the numbers and calculate the average.

As soon as I have some code I will post it and would appreciate your help.

Cheers,

Claudio


Reply With Quote
  #6 (permalink)  
Old November 30th, 2004, 09:38 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi,

I have started coding the html (javascript) page but am having some problems as follows:

1 - How can I create a unique ID for the inputext and another for the TDs . I am using a loop to do that but cannot figure out how to create an unique ID based on the index??

2 - Once I click on the create table button this is creating the table with the input text inside the TDs but then all the rest of the html controls disappear?? I am using document.write(oDiv.outerHTML) and I think this is the problem. But how can I create the other table without hidding the other controls??

3 - Also, how can I clear the DIV content every time I click on the create table button. Everytime before creating the table I would like to clear it so that people can create a table with more rows and columns.

Please run the code so that you can see what is happening.

Cheers,

Claudio

<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++)
                        {
                            var nCount = 1;
                            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)
                }

            }


      </script>

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

                </tr>
                <tr>
                    <td><input type="button" onclick="createTable(document.frmCreate.txtRows.va lue, 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>



Reply With Quote
  #7 (permalink)  
Old December 1st, 2004, 03:52 PM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi,

I was wondering if someone has tried to run my code from my last post and realised the problems I am having? I would really appreciate some help.

Cheers,

Claudio

Reply With Quote
  #8 (permalink)  
Old December 1st, 2004, 04:41 PM
Friend of Wrox
 
Join Date: Jun 2003
Location: , , Denmark.
Posts: 184
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to Jonax
Default

Your first problem concerning the unique id can be solved like this:

Code:
                        // Unique id
                            var nCount = (i * nCol) + j
Reply With Quote
  #9 (permalink)  
Old December 1st, 2004, 04:54 PM
Friend of Wrox
 
Join Date: Jun 2003
Location: , , Denmark.
Posts: 184
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to Jonax
Default

Your second like this:
Code:
//                oDiv.appendChild(oTable);
//                document.write(oDiv.outerHTML)    
                oDiv.innerHTML = oTable.outerHTML;
Reply With Quote
  #10 (permalink)  
Old December 1st, 2004, 05:00 PM
Friend of Wrox
 
Join Date: Jun 2003
Location: , , Denmark.
Posts: 184
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to Jonax
Default

The third:
Code:
                frmCreate.txtRows.value = "";
                frmCreate.txtColumns.value = "";
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Open Workbook,Copy Sheet,Move Sheet, Close/Save ptrussell2009 Excel VBA 0 June 13th, 2008 02:28 PM
format report like spread sheet michael193nj Access 0 March 19th, 2008 05:17 PM
How to use Spread in VB anne1985 Beginning VB 6 2 October 3rd, 2006 07:30 PM
Archiving excel spread sheet in zipped form Hudson40 Excel VBA 0 January 5th, 2005 12:33 PM
save Excel spread-sheet to SQL Server ybao Classic ASP Databases 1 July 12th, 2004 03:02 PM



All times are GMT -4. The time now is 02:55 AM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.