asked on

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

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

leakim971

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

johnecollins

ASKER

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

leakim971

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

johnecollins

ASKER

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

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

johnecollins

ASKER

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

leakim971

you're welcome, have fun