Add <tr> dynamically

Hi,

I have following code. I want to have a button at top so when it is clicked a new row added under current containing all contents but ID's for row, select and text boxes should increment by 1.

Here are two jquery scripts - dynamic select box and clone row.
Each of them work fine but I cannot find the way to use it together in one script. or if someone suggest another short code for that.

Thank you for any suggestion!
           
            
             
              <!DOCTYPE html 
              PUBLIC 
              "-//W3C//DTD XHTML 1.0 Transitional//EN" 
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
             
            
             
              <html xmlns=
              "http://www.w3.org/1999/xhtml">
             
            
             
              <head>
             
            
             
              <meta http-equiv=
              "Content-Type" content=
              "text/html; charset=utf-8" />
             
            
             
               
             
            
             
               
             
            
             
               
             
            
             
              <script type=
              "text/javascript">
             
            
             
               $
              (
              function
              (
              )
              {
             
            
              
              // start a counter for new row IDs
             
            
              
              // by setting it to the number
             
            
              
              // of existing rows
             
            
              
              var newRowNum = 
              0;
             
            
             
               
             
            
              
              // bind a click event to the "Add" link
             
            
             
               $
              (
              '#addnew'
              ).
              click
              (
              function
              (
              )
              {
             
            
              
              // increment the counter
             
            
             
               newRowNum += 
              1;
             
            
             
               
             
            
              
              // get the entire "Add" row --
             
            
              
              // "this" refers to the clicked element
             
            
              
              // and "parent" moves the selection up
             
            
              
              // to the parent node in the DOM
             
            
              
              var addRow = $
              (
              this
              ).
              parent
              (
              ).
              parent
              (
              );
             
            
             
               
             
            
              
              // copy the entire row from the DOM
             
            
              
              // with "clone"
             
            
              
              var newRow = addRow.
              clone
              (
              );
             
            
             
               
             
            
              
              // set the values of the inputs
             
            
              
              // in the "Add" row to empty strings
             
            
             
               $
              (
              'input', addRow
              ).
              val
              (
              ''
              );
             
            
             
               
             
            
              
              // replace the HTML for the "Add" link 
             
            
              
              // with the new row number
             
            
             
               $
              (
              'td:first-child', newRow
              ).
              html
              (newRowNum
              );
             
            
             
               
             
            
              
              // insert a remove link in the last cell
             
            
             
               $
              (
              'td:last-child', newRow
              ).
              html
              (
              '<a href="" class="remove">Remove<\/a>'
              );
             
            
             
               
             
            
              
              // loop through the inputs in the new row
             
            
              
              // and update the ID and name attributes
             
            
             
               $
              (
              'input', newRow
              ).
              each
              (
              function
              (i
              )
              {
             
            
              
              var newID = newRowNum + 
              '_' + i;
             
            
             
               $
              (
              this
              ).
              attr
              (
              'id',newID
              ).
              attr
              (
              'name',newID
              );
             
            
              
              }
              );
             
            
             
               
             
            
              
              // insert the new row into the table
             
            
              
              // "before" the Add row
             
            
             
               addRow.
              before
              (newRow
              );
             
            
             
               
             
            
              
              // add the remove function to the new row
             
            
             
               $
              (
              'a.remove', newRow
              ).
              click
              (
              function
              (
              )
              {
             
            
             
               $
              (
              this
              ).
              parent
              (
              ).
              parent
              (
              ).
              remove
              (
              );
             
            
              
              return 
              false; 
             
            
              
              }
              );
             
            
             
               
             
            
              
              // prevent the default click
             
            
              
              return 
              false;
             
            
              
              }
              );
             
            
              
              }
              );
             
            
             
               </script>
             
            
             
               
             
            
             
               
             
            
             
              <script language=
              "javascript">
             
            
             
              function makeSublist
              (parent,child,isSubselectOptional,childVal
              )
             
            
             
              {
             
            
             
               $
              (
              "body"
              ).
              append
              (
              "<select style='display:none' id='"+parent+child+
              "'></select>"
              );
             
            
             
               $
              (
              '#'+parent+child
              ).
              html
              ($
              (
              "#"+child+
              " option"
              )
              );
             
            
             
               
             
            
              
              var parentValue = $
              (
              '#'+parent
              ).
              attr
              (
              'value'
              );
             
            
             
               $
              (
              '#'+child
              ).
              html
              ($
              (
              "#"+parent+child+
              " .sub_"+parentValue
              ).
              clone
              (
              )
              );
             
            
             
               
             
            
             
               childVal = 
              (
              typeof childVal == 
              "undefined"
              )? 
              "" : childVal ;
             
            
             
               $
              (
              "#"+child
              ).
              val
              (childVal
              ).
              attr
              (
              'selected',
              'selected'
              );
             
            
             
               
             
            
             
               $
              (
              '#'+parent
              ).
              change
              (
              function
              (
              )
              {
             
            
              
              var parentValue = $
              (
              '#'+parent
              ).
              attr
              (
              'value'
              );
             
            
             
               $
              (
              '#'+child
              ).
              html
              ($
              (
              "#"+parent+child+
              " .sub_"+parentValue
              ).
              clone
              (
              )
              );
             
            
              
              if
              (isSubselectOptional
              ) $
              (
              '#'+child
              ).
              prepend
              (
              "<option value='none' selected='selected'> -- Select -- </option>"
              );
             
            
             
               $
              (
              '#'+child
              ).
              trigger
              (
              "change"
              );
             
            
             
               $
              (
              '#'+child
              ).
              focus
              (
              );
             
            
              
              }
              );
             
            
             
              }
             
            
             
               
             
            
             
              $
              (document
              ).
              ready
              (
              function
              (
              )
             
            
             
              {
             
            
             
               makeSublist
              (
              'child',
              'grandsun', 
              true, 
              ''
              ); 
             
            
             
               makeSublist
              (
              'parent',
              'child', 
              false, 
              '1'
              ); 
             
            
             
               
             
            
             
               
             
            
             
               
             
            
             
               $
              (
              "#selectListButton1"
              ).
              click
              (
              function
              (
              )
              {
             
            
              
              alert
              ( 
              'Value is: ' + $
              (
              '#parent'
              ).
              val
              (
              ) 
              );
             
            
              
              }
              );
             
            
             
               $
              (
              "#selectListButton2"
              ).
              click
              (
              function
              (
              )
              {
             
            
              
              alert
              ( 
              'Text is: ' + $
              (
              '#child :selected'
              ).
              text
              (
              ) 
              );
             
            
              
              }
              );
             
            
             
               
             
            
             
               
             
            
             
               
             
            
             
               
             
            
             
               
             
            
             
              }
              );
             
            
             
              </script>
             
            
             
              </head>
             
            
             
              <body>
             
            
             
               
             
            
             
               
             
            
             
               
             
            
             
               
             
            
             
              <form method=
              'POST' 
              name=
              'signupForm' 
              class=
              'cmxform' id=
              'signupForm' action=
              '#'>
             
            
             
               <table cellspacing=
              '0'>
             
            
             
               <tr></tr>
             
            
             
               <tr>
             
            
             
               <td><a id=
              "addnew" href=
              "">Add<
              /a></td>
             
            
             
               <td>
             
            
             
              <select id=
              "parent">
             
            
             
               <option value=
              "1">Flower</option>
             
            
             
               <option value=
              "2">Animal</option>
             
            
             
               
             
            
             
              </select>
             
            
             
              </td>
             
            
             
               
             
            
             
              <td>
             
            
             
              <select id=
              "child">
             
            
             
               <option 
              class=
              "sub_1" value=
              "1">Rose</option>
             
            
             
               <option 
              class=
              "sub_1" value=
              "2">Sunflower</option>
             
            
             
               <option 
              class=
              "sub_1" value=
              "3">Orchid</option>
             
            
             
               <option 
              class=
              "sub_2" value=
              "4">Cow</option>
             
            
             
               <option 
              class=
              "sub_2" value=
              "5">Dog</option>
             
            
             
               
             
            
             
               <option 
              class=
              "sub_2" value=
              "6">Cat</option>
             
            
             
               <option 
              class=
              "sub_2" value=
              "7">Tiger</option>
             
            
             
              </select>
             
            
             
              </td>
             
            
             
              <td>
             
            
             
              <select id=
              "grandsun">
             
            
             
               <option 
              class=
              "sub_1" value=
              "1">Rose type 
              1</option>
             
            
             
               <option 
              class=
              "sub_1" value=
              "2">Rose type 
              2</option>
             
            
             
               <option 
              class=
              "sub_1" value=
              "3">Rose type 
              3</option>
             
            
             
               
             
            
             
               <option 
              class=
              "sub_2" value=
              "4">Sunflower type 
              1</option>
             
            
             
               <option 
              class=
              "sub_2" value=
              "5">Sunflower type 
              2</option>
             
            
             
               <option 
              class=
              "sub_3" value=
              "6">Orchid type 
              1</option>
             
            
             
               <option 
              class=
              "sub_3" value=
              "7">Orchid type 
              2</option>
             
            
             
               <option 
              class=
              "sub_4" value=
              "8">Cow type 
              1</option>
             
            
             
               <option 
              class=
              "sub_4" value=
              "9">Cow type 
              2</option>
             
            
             
               
             
            
             
               <option 
              class=
              "sub_5" value=
              "10">Dog type 
              1</option>
             
            
             
               <option 
              class=
              "sub_6" value=
              "11">Cat type 
              2</option>
             
            
             
               <option 
              class=
              "sub_7" value=
              "12">Tiger type 
              2</option>
             
            
             
               <option 
              class=
              "sub_7" value=
              "13">Tiger type 
              2</option>
             
            
             
               <option 
              class=
              "sub_7" value=
              "14">Tiger type 
              3</option>
             
            
             
               
             
            
             
              </select>
             
            
             
              </td>
             
            
             
              </tr>
             
            
             
              <tr>
             
            
             
              <td>
             
            
             
              <button id=
              "selectListButton1">Get Value</button> <button id=
              "selectListButton2">Get Text</button>
             
            
             
              </td>
             
            
             
               
             
            
             
               </tr>
             
            
             
               </table>
             
            
             
               </form>
             
            
             
               
             
            
             
              </body>
             
            
             
              </html>
Regards,
Topic Participants
yasir.parvez
Kevin Boudloche
Add <tr> dynamically

Add <tr> dynamically

Topic Participants

yasir.parvez

Kevin Boudloche
