Thursday, October 30, 2014

jQuery, duplicate a row in a table and modify after click a button




For example in HTML
<div class='ajax_list'>
        <table class='template list'>

                <tr class='template worksheet-row' >
                    <td class='index' id='index'></td>
                    <td class='Term'></td>
                    <td class='Course'></td>
                    <td class='TutSection'><div type='text' name='TutorialSection' style='width:60px'/></td>
                    <td class='TaList'>list of TA</td>
               
                    <td class='EnrolMax'></td>
                    <td class='Status'></td>
                    <td class='type'></td>
                    <td class='button1'><input type='button' class='duplication' name='duplicate' value="duplicate"/>
                        <input type='button' class='SaveButton1' name='update' value="Save1"/>
                        <input type='hidden' class='tutorialID'/>
                        <input type='hidden' class='course_id'/>
                        <input type='hidden' class='courses_offered_id'/>
                    </td>
                </tr>
            </table>

</div>
To duplicate a row in a table and modify in jQuery via click duplicate button
    $('div.ajax_list input.duplication').live('click', function(){
           var $tr    = $(this).closest('.worksheet-row');
           var $clone = $tr.clone();

//Remove duplicate button in new row
           $clone.find('.duplication').remove();

//empty original content
            $clone.find('.TaList').empty();

//Now append a dropdown menu
 $clone.find('td.TaList').append('<select><option value=" ">=No Assigned</option></select>');
 $clone.find('td.TaList select').append('<option value="1">1</option>');
 $clone.find('td.TaList select').append('<option value="2">2</option>');
//Update button to Update
           $clone.find(':button').val('Update');

//Change cell value to marker
           $clone.find('.type').html('Marker');

//Set new row background color light green
           $clone.css('background-color','lightgreen');

//add new row in table
           $tr.after($clone);
      });     

  For passing the data to function,
$(selector).live(event,data,function)
Example
     $('div.ajax_list input.duplication').live('click',data, function(){

No comments:

Post a Comment