Solved

Create table of input fields and dynamically add a further row by pressing a button then by pressing a further button create a row of input fields for a childd table

Posted on 2011-09-13
7
283 Views
Last Modified: 2012-08-13
I would like to be able to be able to generate a row of input fileds type 'P' - records Parent and when they are complete I would like to add a further empty row of the 'P' type fields at the press of a button.

When any 'P' row is complete I would like to press a different button to add a row of input fields type 'C' - Child records on completion of that row add further rows of either 'P' or 'C' type pressing the appropriate button.

I have found a solution written in javascript - I can't find it now - that allowed me to to add rows but only for 1 table. There was also a delete function as well I have tried to adapt that script but I am not making any headway

Can anybody point me at a template or a source of code that I could use or adapt.

Thank you for reading this

John
0
Comment
Question by:johnecollins
  • 4
  • 3
7 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36532496
it would be great top split your question and have appropriate help for all your needs.

a good start (I hope) :
$(document).ready(function() {

    $("#b1").click(function() {
        $("#mytable").append('<tr><td><input value="P" /></td><td><input value="P" /></td><td><input value="P" /></td></tr>');
    })

    $("#b2").click(function() {
        $("#mytable").append('<tr><td><input value="C" /></td><td><input value="C" /></td><td><input value="C" /></td></tr>');
    })
            
}) 

Open in new window


html :
<input type="button" id="b1" value="P" /><input type="button" id="b2" value="C" />
<table id="mytable"></table>

Open in new window

0
 

Author Comment

by:johnecollins
ID: 36532633
Hi Leakim,

That is a great start for me thank you I can read this and it's is giving me ideas

so should I break down the question maybe? I did it as the big thing because if I created seperate questions I would have to try to manage diverse answers maybe. It may be that I have entered all my concerns in one question but hey, don't ask ....

Thank you

John
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36533164
You're welcome, I just forgot to post this : http://jsfiddle.net/vEy2g/

0
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 

Author Comment

by:johnecollins
ID: 36535137
Leakim,

Thanks for the link to jsfiddle looks an interesting site.

As you know this works marvelllously on jsfiddle,

However I copied it into my netbeans 6.8 IDE and the buttons are displayed but I get no response from them

I have done something wrong could you please have a look at the code and spot my error

I also get an error indicator at row 23 the table definition row and the text I get is

"the tag content is unresolved, expected one of <TFOOT>, <THEAD>, <COL>, <CAPTION>, <COLGROUP>"

Thank you very much

John
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <script language="JavaScript" type="text/javascript">
            $(document).ready(function() {

                $("#b1").click(function() {
                    $("#mytable").append('<tr><td><input value="P" /></td><td><input value="P" /></td><td><input value="P" /></td></tr>');
                })

                $("#b2").click(function() {
                    $("#mytable").append('<tr><td><input value="C" /></td><td><input value="C" /></td><td><input value="C" /></td></tr>');
                })

            })
        </script>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" id="b1" value="P" /><input type="button" id="b2" value="C" />
        <table id="mytable"></mytable>

    </body>
</html>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36535213
just add jquery lib : http://code.jquery.com/jquery-1.6.2.js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
        <script language="JavaScript" type="text/javascript">
            $(document).ready(function() {

                $("#b1").click(function() {
                    $("#mytable").append('<tr><td><input value="P" /></td><td><input value="P" /></td><td><input value="P" /></td></tr>');
                })

                $("#b2").click(function() {
                    $("#mytable").append('<tr><td><input value="C" /></td><td><input value="C" /></td><td><input value="C" /></td></tr>');
                })

            })
        </script>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" id="b1" value="P" /><input type="button" id="b2" value="C" />
        <table id="mytable"></mytable>

    </body>
</html>

Open in new window

0
 

Author Closing Comment

by:johnecollins
ID: 36535346
Leakim,

Thank you ery much for a very succinct and appropriate solution

I have adapted it further and added another button and I am now working on my solution.

This has taught me a lot thank you

John
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36535360
you're welcome, have fun
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How Close unsubmited attempts 10 46
How to hide contact form only if no validation errors 4 29
Slush on text 2 11
Table header must be on top 2 31
Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question