1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Problem getting clone section to work

Discussion in 'JavaScript' started by neilfurry, Jul 6, 2016.

0
  1. #1
    Hi

    Here is my problem

    https://jsfiddle.net/mphur5eq/14/

    I have two tables on the left section1 on top and section2 at the bottom

    each section has its own button to insert row

    section 1 has different number of fields than that on section 2.

    the problem is when i clicked on New Row on section 2 it clones the row from section 1 which is wrong,

    it should clone the row of the section where it belongs.

    can you help me with this?

    Thank you
     
    neilfurry, Jul 6, 2016 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    Hi.
    Try avoid using ID in cloning, as two same ID within same page isn't valid.

    About cloning itself, I think you'd better use following pattern:
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table cloning</title>
        <style>
            input[type="text"]{
                width: 6em;
            }
        </style>
    </head>
    <body>
        <div class="frms">
            <table>
                <caption>Table 1</caption>
                <tr><!-- 1st row -->
                    <td><input value="0" type="text"></td>
                    <td><input value="0" type="text"></td>
                    <td><input value="0" type="text"></td>
                </tr><tr><!-- 2nd row -->
                    <td><input class="newrow" value="New Row" type="button"></td>
                </tr>
            </table>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
        <script>
            $('.newrow').on('click', function(){
                //get 1st row
                var $row1 = $(this).parents('tr').prev();
                //create clone to 1st row
                var $cloneRow1 = $row1.clone();
                //insert newly created clone to place after row1
                $row1.after($cloneRow1);
            });
        </script>
    </body>
</html>
    HTML:
     
    hdewantara, Jul 6, 2016 IP