Adsense
Popular Posts
- Code update from PHP 7.4 to PHP 8.1 - PhpSpreadsheet
- MySQL workbench -"Could not decrypt password cache"
- Code update from PHP 7.4 to PHP 8.1 - Worksheet/Iterator.php
- Rendering HTML tags inside textarea
- axios handle blob type data
- Unix Utils and wget in Windows
- increase mysql query speed
- Setup vi syntax for PHP
- Get WAMP running on EC2
- add comment to table columns in phpMyAdmin
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(){
Labels:
jQuery
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment