Skip to content

Instantly share code, notes, and snippets.

@mahedi2014

mahedi2014/index.html

Created May 5, 2015 06:12
Show Gist options
  • Save mahedi2014/1a79e9e12fae82234bbe to your computer and use it in GitHub Desktop.
Save mahedi2014/1a79e9e12fae82234bbe to your computer and use it in GitHub Desktop.
Download ZIP
Add more option with jq function
Raw
index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
//Add a row in "#addedRows" by cloning '#row'
var cloneCount = 1; //set global var for count clone number
function cloneRow(contentRowId, addRowId, removeRowId){
var newRowId = addRowId+ cloneCount++;
var newDeleteId = "deleteId-"+newRowId;
$('#'+contentRowId)
.clone()
.attr('id', newRowId)
.insertAfter($('[id^='+addRowId+']:last'))
.html( $("#"+contentRowId).html() );
$('[id^='+removeRowId+']:last').attr('id', newDeleteId);
$('#'+newDeleteId).show();
}
//Delete a column when row more than one
function deleteRow(deleteId){
if(cloneCount > 1){
$('#'+deleteId).closest( "td").parent('tr').remove();
cloneCount--;
}
}
</script>
</head>
<body>
<table class="table m-top-md">
<thead>
<tr class="bg-theme">
<th class="hidden-xs" width="98%">Configuration details</th>
<th><button type="button" id="clone" class="btn btn-xs btn-info" onclick="cloneRow('contentRowId', 'addRowId', 'removeRowId');">Add More</button></th>
</tr>
</thead>
<tbody>
<tr id="contentRowId">
<td>
</td>
<td class="hidden-xs">
<button type="button" id='removeRowId' class="btn btn-xs btn-danger" style="display: none" onclick="deleteRow(this.id);" >Remove</button>
</td>
</tr>
<tr id="addRowId" ></tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment