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
282 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
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

825 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