Skip to content

Instantly share code, notes, and snippets.

@setkyar
Last active August 29, 2015 14:04
Show Gist options
  • Save setkyar/9529ccac09146930cf95 to your computer and use it in GitHub Desktop.
Save setkyar/9529ccac09146930cf95 to your computer and use it in GitHub Desktop.
Add New Row with Dynamic name
<!-- First Create a Template to append -->
<script type="text/plain" id="row_template" >
<tr>
<td><input type="text" Placeholder="Simple" data-property="first_simple"></td>
<td><input type="text" Placeholder="Simple" data-property="second_simple"></td>
<td><input type="text" Placeholder="Simple" data-property="third_simple"></td>
</tr>
</script>
<!-- Second:: Create wanted to add Table-->
<input type="submit" value="Add Row" id="add-new-row">
<table>
<thead>
<tr>
<th>First Simple</th>
<th>Second Simple</th>
<th>Third Simple</th>
</tr>
</thead>
<tbody id="row_container">
</tbody>
</table>
<script type="text/javascript">
var current_counter = 0;
function addnewrow(data) {
var template = $($('#row_template').html());
$(template).find('input').each(function(){
var property = $(this).attr('data-property');
$(this).attr('name','simple['+current_counter+']['+property+']');
//Result Ex::simple[0][first_simple]
// simple[1][first_simple]
// simple[2][first_simple]
$(this).val(data[property]);
});
$('#row_container').append(template);
current_counter++;
}
//When user click add new row
$('#add-new-row').on('click',function(data){
addnewrow(data);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment