Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
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
Medium Priority
?
288 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 2000 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
These days socially coordinated efforts have turned into a critical requirement for enterprises.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

604 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