Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Assign some classes and attributes
thisQuestion.addClass('variable-length-text-array');
$('table.subquestions-list tr', thisQuestion).each(function(i){
$('> *', this).each(function(i){
$(this).addClass('column-'+i+'');
$(this).attr('data-column', i);
});
});
$('table.subquestions-list tr.subquestion-list td.column-4', thisQuestion).addClass('count female');
$('table.subquestions-list tr.subquestion-list td.column-5', thisQuestion).addClass('count male');
$('table.subquestions-list tr.subquestion-list td:last-child', thisQuestion).addClass('total row');
$('table.subquestions-list tr.subquestion-list:last', thisQuestion).addClass('totals');
// Insert some styles
$('<style type="text/css">\
.hidden {\
display: none !important;\
visibility: hidden !important;\
}\
.expandable-control:disabled {\
opacity: 0.3;\
}\
</style>').appendTo('head');
// Insert the controls
$('table.subquestions-list', thisQuestion).after('<div class="expandable-controls-wrapper">\
<button type="button" class="expandable-control remove">-</button>\
<button type="button" class="expandable-control add">+</button>\
</div>');
// Click events
$('.expandable-control.add', thisQuestion).click(function (event) {
$('tr.subquestion-list.hidden:first', thisQuestion).removeClass('hidden').addClass('shown');
handleArrayControls();
$('.expandable-control', thisQuestion).blur();
});
$('.expandable-control.remove', thisQuestion).click(function (event) {
$('tr.subquestion-list.shown:last', thisQuestion).removeClass('shown').addClass('hidden');
clearRows();
handleArrayControls();
$('.expandable-control', thisQuestion).blur();
});
function handleArrayControls() {
$('.expandable-control.remove', thisQuestion).prop('disabled', true);
if($('tr.subquestion-list.dynamic:visible', thisQuestion).length > 1) {
$('.expandable-control.remove', thisQuestion).prop('disabled', false);
}
$('.expandable-control.add', thisQuestion).prop('disabled', false);
if($('tr.subquestion-list.dynamic:visible', thisQuestion).length == $('tr.subquestion-list', thisQuestion).length) {
$('.expandable-control.add', thisQuestion).prop('disabled', true);
}
}
function clearRows() {
$('tr.subquestion-list.hidden input:text, tr.subquestion-list.hidden select', thisQuestion).val('');
columnTotals($('td.count.female:first'));
columnTotals($('td.count.male:first'));
}
// Initially shown rows
$('tr.subquestion-list:eq(0)', thisQuestion).addClass('dynamic shown');
$('tr.subquestion-list:gt(0):not(:last)', thisQuestion).addClass('dynamic hidden');
$('tr.subquestion-list.dynamic td:not(.total.row) input:text', thisQuestion).filter(function () {return !!this.value;}).closest('tr.subquestion-list').addClass('answered-row');
var thisQTable = $('table.subquestions-list', thisQuestion);
var thisQRows = $('.answered-row', thisQuestion);
var lastAnsweredRow = $('.answered-row:last', thisQuestion);
var lastAnsweredIndex = $('tr.subquestion-list', thisQTable).index(lastAnsweredRow);
$('tr.subquestion-list:lt('+(lastAnsweredIndex+1)+')', thisQuestion).removeClass('hidden').addClass('shown');
handleArrayControls();
// Readonly for totals
$('table.subquestions-list td.total input[type="text"], table.subquestions-list tr.totals input[type="text"]', thisQuestion).prop('readonly', true);
// Clean up the totals row
$('tr.subquestion-list.totals td:not(.count):not(.total) input[type="text"]').val('N/A').hide();
// Initial totals
$('td.total.row input[type="text"], tr.subquestion-list.totals td.count input[type="text"]').each(function(i) {
if($(this).val() == '') {
$(this).val(0);
}
});
// Listener on the count inputs
$('table.subquestions-list td.count input[type="text"]', thisQuestion).on('change keyup', function(e) {
// Row total
var thisRow = $(this).closest('tr.subquestion-list');
var thisCountFemale = Number($('td.count.female input[type="text"]', thisRow).val());
if(isNaN(thisCountFemale)) {
thisCountFemale = 0;
}
var thisCountMale = Number($('td.count.male input[type="text"]', thisRow).val());
if(isNaN(thisCountMale)) {
thisCountMale = 0;
}
$('td.total input[type="text"]', thisRow).val(thisCountFemale + thisCountMale);
// Column total
columnTotals(this);
});
function columnTotals(el) {
var thisColumn = $(el).closest('td').attr('data-column');
var colTotal = 0;
$('tr.subquestion-list:not(.totals) td[data-column="'+thisColumn+'"] input[type="text"]').each(function(i) {
var thisVal = Number($(this).val());
if(!isNaN(thisVal)) {
colTotal = colTotal + thisVal;
}
});
$('tr.subquestion-list.totals td[data-column="'+thisColumn+'"] input[type="text"]').val(colTotal);
$('tr.totals td.total input[type="text"]').val(Number($('tr.totals td.count.female input[type="text"]').val())+Number($('tr.totals td.count.male input[type="text"]').val()));
}
});
</script>
