Skip to content

Instantly share code, notes, and snippets.

@mahedi2014

mahedi2014/addMore.html

Created April 29, 2015 08:16
Show Gist options
  • Save mahedi2014/c6c466d44b81c7953d6d to your computer and use it in GitHub Desktop.
Save mahedi2014/c6c466d44b81c7953d6d to your computer and use it in GitHub Desktop.
Download ZIP
Add more field with jquery in bootstrap
Raw
addMore.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script>
var rowCount = 1;
function addMoreRows(){
var recRow = '<tr id="rowCount'+rowCount+'">' +
'<td>'+
"<select class='form-control' name='select[]'>"+
"<option value=''>Select one</option>"+
"<option value=''>Test</option>"+
'</select>' +
'</td>'+
"<td><input class='form-control' value='0' name='input[]' type='text'/>"+"</td>" +
'<td><a class="label label-danger" href="javascript:void(0);" onclick="removeRow('+rowCount+');">Delete</a></td>' +
'</tr>';
jQuery('#addedRows').append(recRow);
rowCount ++;
}
function removeRow(removeNum) {
jQuery('#rowCount'+removeNum).remove();
}
</script>
</head>
<body>
<table class="table table-striped" id="responsiveTable">
<thead>
<tr>
<th>Select Field</th>
<th>Input Field </th>
<th><a href="#"><span onclick="addMoreRows();" class="label label-info">Add More</span></a></th>
</tr>
</thead> <tbody id="addedRows"> </tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment