<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<table>
<thead>
<tr>
<th><label>Enter Id</label></th>
<th><label>Specification Name</label></th>
<th><label>Select Course Code</label></th>
<th><label>Select Branch</label></th>
<th><label>Unit No</label></th>
<th><label>1 Marks</label></th>
<th><label>2 Marks</label></th>
<th><label>4 Marks</label></th>
<th><label>8 Marks</label></th>
<th><label>Total</label></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" name="Enter Id" type="text" placeholder="Enter Id" /></td>
<td><input class="form-control" name="Specification Name" type="text" placeholder="Specification Name" /></td>
<td><input class="form-control" name="Course Code" type="text" placeholder="Course Code" /></td>
<td><input class="form-control" name="Branch" type="text" placeholder="Branch" /></td>
<td><input class="form-control" name="Unit No" type="number" placeholder="Unit No" /></td>
<td><input class="form-control" name="1 Marks" type="text" placeholder="1 Marks" /></td>
<td><input class="form-control" name="2 Marks" type="text" placeholder="2 Marks" /></td>
<td><input class="form-control" name="4 Marks" type="text" placeholder="4 Marks" /></td>
<td><input class="form-control" name="8 Marks" type="text" placeholder="8 Marks" /></td>
<td><input class="form-control" name="Total" type="text" placeholder="Total" /></td>
<td>
<button class="btn btn-danger btn-remove" type="button">
<i class="glyphicon glyphicon-minus gs"></i>
</button>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-success btn-add" type="button">
<i class="glyphicon glyphicon-plus gs"></i>
<b> Add</b>
</button>
</body>
.entry:not(:first-of-type)
{
margin-top: 10px;
}
.glyphicon
{
font-size: 12px;
}
td {
padding:5px;
}
body {
padding:10px;
}
th {
text-align: center;
}
.container{
margin-top:20px;
}
.image-preview-input {
position: relative;
overflow: hidden;
margin: 0px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.image-preview-input input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.image-preview-input-title {
margin-left:2px;
}
$(document).ready(function() {
//Disable the Remove Button
var rowCount = $('table >tbody:last >tr').length;
if(rowCount == 1) {
document.getElementsByClassName('btn-remove')[0].disabled = true;
}
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('table');
var currentEntry = $('table>tbody>tr:last');
var newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val(''); //Remove the Data - as it is cloned from the above
//Add the button
var rowCount = $('table >tbody:last >tr').length;
if(rowCount > 1) {
var removeButtons = document.getElementsByClassName('btn-remove');
for(var i = 0; i < removeButtons.length; i++) {
removeButtons.item(i).disabled = false;
}
}
}).on('click', '.btn-remove', function(e) {
$(this).parents('tr:first').remove();
//Disable the Remove Button
var rowCount = $('table >tbody:last >tr').length;
if(rowCount == 1) {
document.getElementsByClassName('btn-remove')[0].disabled = true;
}
e.preventDefault();
return false;
});
// -- Start File Upload -- //
$(document).on('click', '#close-preview', function(){
$('.image-preview').popover('hide');
// Hover befor close the preview
$('.image-preview').hover(
function () {
$('.image-preview').popover('show');
},
function () {
$('.image-preview').popover('hide');
}
);
});
// Create the close button
var closebtn = $('<button/>', {
type:"button",
text: 'x',
id: 'close-preview',
style: 'font-size: initial;',
});
closebtn.attr("class","close pull-right");
// Set the popover default content
$('.image-preview').popover({
trigger:'manual',
html:true,
title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
content: "There's no image",
placement:'bottom'
});
// Clear event
$('.image-preview-clear').click(function(){
$('.image-preview').attr("data-content","").popover('hide');
$('.image-preview-filename').val("");
$('.image-preview-clear').hide();
$('.image-preview-input input:file').val("");
$(".image-preview-input-title").text("Browse");
});
// Create the preview image
$(".image-preview-input input:file").change(function (){
var img = $('<img/>', {
id: 'dynamic',
width:250,
height:200
});
var file = this.files[0];
var reader = new FileReader();
// Set preview image into the popover data-content
reader.onload = function (e) {
$(".image-preview-input-title").text("Change");
$(".image-preview-clear").show();
$(".image-preview-filename").val(file.name);
img.attr('src', e.target.result);
$(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show");
}
reader.readAsDataURL(file);
});
// -- END File Upload -- //
});
