I have generated a dynamic rows with input text based on each selected month checkbox. I would need to pick the values of dynamically generated input text (if value typed in that row) and need to multiply the last two columns of each row and get its value displayed in ReadOnly input text. Then finally I want to SUM all the ReadOnly text and display in footer.
I am not getting any idea how should I pick up the values of dynamically generated values.
Below is the code:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
#ddlCategory ul li {
padding: 0;
margin: 0;
font-size: 15px;
}
#ddlCategory ul {
list-style-type: none;
padding: 0 !important;
margin: 0 !important;
}
#ddlCategory {
height: 100px !important;
overflow-y: auto;
overflow-x: hidden;
width: 20%;
text-align: left;
border: solid 1px #ececec;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(document).ready(function () {
FillCategories();
});
function GetMonthName(monthNumber) {
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
return months[monthNumber - 1];
}
function FillCategories() {
//debugger;
//var $s = jQuery.noConflict();
var ddl = '<ul>';
for (var i = 1; i <= 12; i++) {
ddl += '<li class="kslrows"><input type="checkbox" value="' + i + '" onclick="GenerateTable();" /><label id="label_' + i + '">';
ddl += GetMonthName(i) + '</label></li>';
}
ddl += '</ul>';
$("#ddlCategory").append(ddl);
}
function GenerateTable() {
var HTML = '', checkedcounts = 0, rowcounter = 0
$('#ddlCategory input:checked').each(function () {
checkedcounts += 1;
});
if (checkedcounts > 0) {
HTML = '<table class="table"><thead><tr><th class="text-center" scope="col">#</th><th class="text-center" scope="col">Month</th><th class="text-center" scope="col">Resource Count</th><th class="text-center" scope="col">Development Hours</th><th class="text-center" scope="col">No. of Days</th><th class="text-center" scope="col">Total</th></tr></thead>';
HTML += '<tbody>';
$('#ddlCategory input:checked').each(function () {
//selected.push($s(this).val());
//alert($(this).val());
rowcounter += 1;
var _value = $(this).val();
HTML += '<tr>';
HTML += '<td class="text-center"><strong>' + rowcounter + '.</strong><input type="hidden" id="hdntext_' + rowcounter + '" value="' + _value + '" /></td><td class="text-center">' + $('#label_' + _value).text() + '</td><td class="text-center"><input type="text" id="txtinputResourceControl_' + rowcounter + '" class="form-control form-control-sm" maxlength="5" placeholder="only digits"/></td><td class="text-center"><input type="text" id="txtinputDevelopmentHrs_' + rowcounter + '" class="form-control form-control-sm" maxlength="5" placeholder="only digits"/></td><td class="text-center"><input type="text" id="txtinputNoofDays_' + rowcounter + '" class="form-control form-control-sm" maxlength="5" placeholder="only digits"/></td><td class="text-center"><input type="text" id="txtinputTotal_' + rowcounter + '" class="form-control form-control-sm" disabled readonly /></td>';
HTML += '</tr>';
});
HTML += '<tfooter><tr><td colspan="5" align="right" class="bg-light"><strong>Development Effort (Hours) Total</strong></td><td class="text-center font-bold"><span id="totalDiv" class="font-bold"></span></td></tr></tfooter>';
HTML += '</tbody>';
HTML += '</table>';
}
$('#developmenteffortExpand').html(HTML);
SetOnlyNumbers();
}
function SetOnlyNumbers() {
/* Global Row Count of Dynamic Table */
var rowCount = $('#developmenteffortExpand').find("table tbody tr").length, loopCounter = 0;
/* Resource Control */
for (var i = 0; i <= rowCount; i++) {
loopCounter += 1;
$('#txtinputResourceControl_' + loopCounter).keypress(function (event) {
if (event.which < 48 || event.which > 57) {
event.preventDefault();
}
}).on('paste', function (event) {
event.preventDefault();
});
}
loopCounter = 0;
/* Development Hrs */
for (var i = 0; i <= rowCount; i++) {
loopCounter += 1;
$('#txtinputDevelopmentHrs_' + loopCounter).keypress(function (event) {
if (event.which < 48 || event.which > 57) {
event.preventDefault();
}
}).on('paste', function (event) {
event.preventDefault();
});
}
loopCounter = 0;
/* No of Days */
for (var i = 0; i <= rowCount; i++) {
loopCounter += 1;
$('#txtinputNoofDays_' + loopCounter).keypress(function (event) {
if (event.which < 48 || event.which > 57) {
event.preventDefault();
}
}).on('paste', function (event) {
event.preventDefault();
});
}
loopCounter = 0;
}
</script>
</head>
<body>
<div id="ddlCategory" class="form-control form-control-sm">
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="developmenteffortExpand"></div>
</div>
</div>
</div>
</body>
</html>
