Table Clone Add Duplicate
by Avinashullal
HTML
<table class="table table-bordered" id="planTbl">
<tbody>
<tr>
<th></th>
<th colspan="2">Jan</th>
<th colspan="2">Feb</th>
<th colspan="2">Mar</th>
</tr>
<tr>
<th>Parent Activity</th>
<th>Hours <span id="Header-hours1">5/176</span>
</th>
<th>FTE <span id="Header-fte1">0.03/1</span>
</th>
<th>Hours <span id="Header-hours2">66/160</span>
</th>
<th>FTE <span id="Header-fte2">0.42/1</span>
</th>
<th>Hours <span id="Header-hours3">6/176</span>
</th>
<th>FTE <span id="Header-fte3">0.04/1</span>
</th>
</tr>
<tr class="item">
<td>
<select class="form-control caasDDL">
<option value="0">Select...</option>
<option value="1">Reports</option>
<option value="2" selected="selected">Analytics</option>
<option value="3">Systems</option>
<option value="4">hdffg</option>
<option value="5">Line Management</option>
</select>
<input type="hidden" value="Analytics">
</td>
<td>
<input type="text" class="form-control hrs-N1" value="2">
</td>
<td>
<input type="text" class="form-control fte-N1" value="0.01">
</td>
<td>
<input type="text" class="form-control hrs-N2" value="33">
</td>
<td>
<input type="text" class="form-control fte-N2" value="0.21">
</td>
<td>
<input type="text" class="form-control hrs-N3" value="3">
</td>
<td>
<input type="text" class="form-control fte-N3" value="0.02">
</td>
<td><a...
CSS
input[type="text"] {
width:40px;
text-align:right;
}
.error {
display:none;
color:red;
}
JavaScript
$(function () {
var txt;
var seen = {};
var arr = [];
//Button to add new row to the table inorder to add new Activity.
$(document).on('click', '.btn-add', function () {
$('#planTbl tr ').each(function () {
txt = $(this).find("option:selected").text();
arr.push(txt);
});
$(this).closest('tr').clone().insertAfter($(this).closest('tr'));
$(this).closest('tr').next('tr').find('.emptyTd >span').hide();
$(this).closest('tr').next('tr').find('.emptyTdTot').empty("");
$(this).closest('tr').next('tr').find('input').val("");
$(this).closest('tr').next('tr').find('select').find('option').removeAttr('selected');
$(this).closest('tr').next('tr').find('select').find('option:first').attr('selected', 'selected');
$(this).remove();
});
$(document).on('click', ".caasDDL", function () {
arr = [];
$('#planTbl tr ').each(function () {
txt = $(this).find("option:selected").text();
arr.push(txt);
});
});
// on change event
$(document).on('change', ".caasDDL", function () {
var selectedText = $(this).find("option:selected").text();
var found = $.inArray(selectedText, arr) > -1;
if (found) {
alert('Already Selected');
$(this).prop('selectedIndex', 0);
} else {}
});
$(document).on('click', '.remove', function (e) {
$(this).parents('tr').addClass('selected');
selectedRow = $(this).parents('tr');
var td = $(selectedRow).children('td');
alert(td[0].textContent);
selectedRow.remove();
});
});