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
281 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

920 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now