1.
<table class="table table-bordered matrixTable" id="uniqueTableMatrix">
<thead class="matrixTableHeader">
<tr>
<td rowspan='2'>Content Area</td>
<td rowspan='2'>No of Item</td>
<td rowspan='2'>Sub Area</td>
<td rowspan='2'>No of Item</td>
<td colspan='3'>Difficulty Level 1</td>
<td colspan='3'>Difficulty Level 2</td>
<td colspan='3'>Difficulty Level 3</td>
<td rowspan='2'>Action</td>
</tr>
<tr>
<td>C 1</td>
<td>C 2</td>
<td>C 3</td>
<td>C 1</td>
<td>C 2</td>
<td>C 3</td>
<td>C 1</td>
<td>C 2</td>
<td>C 3</td>
</tr>
</thead>
<tbody id="tblBodyMatrix"></tbody>
<tfoot class="matrixTableFooter" id="questionsMatrixTableFooter">
<tr class="totalColumn">
<td class="totalCol">Total:</td>
<td class="totalCol">0</td>
<td class="totalCol"></td>
<td class="totalCol">0</td>
<td class="totalCol">0</td>
<td class="totalCol">0</td>
<td class="totalCol">0</td>
<td class="totalCol">0</td>
<td class="totalCol">0</td>
<td class="totalCol">0</td>
<td class="totalCol">0</td>
<td class="totalCol">0</td>
<td class="totalCol">0</td>
<td class="totalCol"></td>
</tr>
</tfoot>
</table>
2.
$(document).ready(function () {
uniqeQuestions.AddMore();
uniqeQuestions.CellChangeTotal();
uniqeQuestions.CellMaxLengthValodation();
});
3.
var uniqeQuestions ={
AddMore:function () {
uniqeQuestions.RemoveMatrixRow();
$('#btnAddmoreMatrix').click(function () {
if ($("#ddlContentArea").prop('selectedIndex') != 0) {
var contentareaID = $('#ddlContentArea').val();
var rowIndex = uniqeQuestions.FindRowContent(contentareaID);
var contentItem = $('#txtAreaItem').val();
if (uniqeQuestions.ContentAreaitemValueValidation(rowIndex, contentItem)) {
contentItem = $('#txtAreaItem').val();
if (uniqeQuestions.ValidateMatrixTotalRequiedItems()) {
if (uniqeQuestions.ValidateDuplicateContentAreaSubContentArea()) {
var contentarea = $("#ddlContentArea option:selected").text();
var subArea = $("#ddlSubArea option:selected").text();
var subAreaID = $('#ddlSubArea').val();
if (rowIndex.length >= 1 || rowIndex.length == null)//Content area exist in matrix
{
var trRow = "<tr class='single'><td class='rowDataSd'><label class='contentAreaID' style='display:none;'>" + contentareaID + "</label><label class='contentAreaText' style='display:none;'>" + contentarea + "</label></td><td class='rowDataSd'>" + contentItem + "</td><td class='rowDataSd'><label class='subAreaID' style='display:none;'>" + subAreaID + "</label>" + subArea + "</td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d1c1' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d1c2' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d1c3' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d2c1' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d2c2' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d2c3' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d3c1' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d3c2' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d3c3' /></td><td><a href='#' class='remove_MatrixRow'>Remove</a></td></tr>";
$('#uniqueTableMatrix > tbody > tr').eq(rowIndex).after(trRow);
}
else //else if content area does not exist in matrix
{
var trRow = "<tr class='single'><td class='rowDataSd'><label class='contentAreaID' style='display:none;'>" + contentareaID + "</label><label class='contentAreaText'>" + contentarea + "</label></td><td class='rowDataSd'>" + contentItem + "</td><td class='rowDataSd'><label class='subAreaID' style='display:none;'>" + subAreaID + "</label>" + subArea + "</td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d1c1' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d1c2' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d1c3' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d2c1' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d2c2' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d2c3' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d3c1' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d3c2' /></td><td class='rowDataSd'><input type='number' min='1' max='30' class='commontextBox matrixQuestionNo cellValidation d3c3' /></td><td><a href='#' class='remove_MatrixRow'>Remove</a></td></tr>";
$('#tblBodyMatrix').append(trRow);
}
uniqeQuestions.RemoveMatrixRow();
uniqeQuestions.CellChangeTotal();
uniqeQuestions.CellMaxLengthValodation();
uniqeQuestions.TotalRowFooter();
}
}
}
}
else {
alert('Please select content area !');
}
});
},
ContentAreaitemValueValidation: function (rowIndex, contentItem)
{
var flag = true;
if (rowIndex.length >= 1 || rowIndex.length == null)
{
$('#txtAreaItem').val('');
}
else
{
if(contentItem==null || contentItem=="")
{
alert('Please enter content area item value !');
flag = false;
}
}
return flag;
},
RemoveMatrixRow:function()
{
$(".remove_MatrixRow").unbind().click(function ()
{
if (!uniqeQuestions.ShiftRowDataNextRow($(this).closest(".single")))
{
$(this).closest(".single").remove();
}
else {
$(this).closest(".single").remove();
}
uniqeQuestions.ResetAllTableData();
uniqeQuestions.TotalRowFooter();
});
},
ShiftRowDataNextRow:function (singleRow)
{
var cellContentAreaCell = singleRow.find('.contentAreaText');
var cellContentAreaId = singleRow.find('.contentAreaID').text();
var currentCellValue = singleRow.find('td')[1].innerText;
var flag = false;
if (!$(cellContentAreaCell).is(':hidden'))
{
var nextRow = $(singleRow).next('tr.single');
var nextContentAreaId = nextRow.find('.contentAreaID').text();
if (nextContentAreaId == cellContentAreaId)
{
$(singleRow).next('tr.single').find('.contentAreaText').show();//show the content area
var s = $(singleRow).next('tr.single').find('td'); //Shuffle the value of Content AreaItem
s[1].innerText = currentCellValue;
}
flag = true;
}
return flag;
},
FindRowContent:function (conterntAreaId)
{
var rowIndex = "";
$("#tblBodyMatrix tr").each(function ()
{
if (conterntAreaId ==$(this).find('.contentAreaID').html())
{
rowIndex = $(this).index();
}
});
return rowIndex;
},
CellMaxLengthValodation:function ()
{
$(document).on('input', '.cellValidation', function ()
{
var allowedDigits = 2;
var length = $(this).val().length;
var max = parseInt($(this).attr("max"));
if ($(this).val() == "") {
$(this).val("");
}
if ($(this).val().indexOf('.') != -1) {
allowedDigits = 3;
}
if (length > allowedDigits) {
$(this).val($(this).val().substring(1));
}
if ($(this).val() > max && max > 0)
{
$(this).val($(this).val().substring(1));
}
});
},
CellChangeTotal:function ()
{
$(".matrixQuestionNo").unbind().change(function ()
{
var $row = jQuery(this).closest('tr');
var $columns = $row.find('td');
////To Check the limit of SubArea Item and total of difficulty &complexity ///////
var subAreaItemLimit = 0;
var sumSubAreaItem = 0;
var contentAreaID = "";
var subContentAreaId = "";
jQuery.each($columns, function (i, item)
{
if (i == 0)
{
contentAreaID = $(item).find('.contentAreaID').text();
}
if (i == 2)
{
subContentAreaId = $(item).find('.subAreaID').text();
}
if ($(item).find('input').length != 0)
{
if (i == 3)
{
var itemValue = $(item).find('input').val();
if (itemValue == "" || itemValue == null)
{
itemValue = 0;
}
subAreaItemLimit = parseInt(itemValue);
}
else
{
var itemValue = $(item).find('input').val();
if (itemValue == "" || itemValue == null)
{
itemValue = 0;
}
sumSubAreaItem = parseInt(sumSubAreaItem) + parseInt(itemValue);
}
}
});
if (sumSubAreaItem > subAreaItemLimit)
{
if ($(this).parent('td').index() == 3)
{
var tableRow = $(this).parent('td').parent('tr');
uniqeQuestions.OnSubAreaLimitChange(tableRow);
uniqeQuestions.ResetAllTableData();
}
else
{
alert('Please check sub area item limit :' + subAreaItemLimit);
$(this).val('');
$(this).focus();
}
}
if (sumSubAreaItem <= subAreaItemLimit)
{
uniqeQuestions.ValidateSubAreaItemsTotal();
uniqeQuestions.ResetAllTableData();
}
uniqeQuestions.TotalRowFooter();
});
},
FinalValidation:function ()
{
var contentItemsTotal = 0;
var contentSubAreaItemsTotal = 0;
var matrixItemsTotal = 0;
var flag = true;
$("#uniqueTableMatrix td.totalCol").each(function (i)
{
if (i ==1)
{
if ($(this).html() != "" )
{
contentItemsTotal = parseInt($(this).html());
}
}
if (i == 3)
{
if ($(this).html() != "") {
contentSubAreaItemsTotal = parseInt($(this).html());
}
}
if (i == 13)
{
if ($(this).html() != "") {
matrixItemsTotal = parseInt($(this).html());
}
}
});
if(contentSubAreaItemsTotal<contentItemsTotal)
{
alert('Sub area item total is less than the content area item total !');
flag = false;
}
else if(matrixItemsTotal<contentSubAreaItemsTotal)
{
alert('Your selected items is less than required items !');
flag = false;
}
else if (matrixItemsTotal == 0)
{
alert('There is no item added in matrix table !');
flag = false;
}
return flag;
},
OnSubAreaLimitChange:function (tableRow)
{
$(tableRow).each(function ()
{
$('td', this).each(function ()
{
if ($(this).index() != 3)
{
$(this).find('input').val('');
}
});
});
},
ResetAllTableData:function ()
{
unique_formSetsQuations = [];
var contentAreaId = "";
var subContentAreaId = "";
$("#tblBodyMatrix tr td").each(function ()
{
if ($(this).index() == 0)
{
contentAreaId = $(this).find('.contentAreaID').text();
}
if ($(this).index() == 2)
{
subContentAreaId = $(this).find('.subAreaID').text();
}
if ($(this).index() > 3 && $(this).index() < 13)
{
var difficulityComplexity = $(this).find('input').attr('class').split(' ')[3];
var cellValue = $(this).find('input').val();
var difficulityLevelComplexityLevel = uniqeQuestions.GetDifficulityComplexity(difficulityComplexity);
var difficulity = difficulityLevelComplexityLevel.split('#')[0];
var complexity = difficulityLevelComplexityLevel.split('#')[1];
if (cellValue == null || cellValue == "")
{
cellValue = "";
}
if (cellValue != "")
{
var result = uniqeQuestions.MatrixRule(contentAreaId, subContentAreaId, difficulity, complexity, cellValue);
if(result==1)
{
$(this).find('input').val('');
}
}
}
});
},
ValidateSubAreaItemsTotal:function ()
{
var contentAreaId = "";
var subContentAreaId = "";
var itemsTotal = 0;
var cellValueItemSum = 0;
var valueChanged = false;
var eventStop = true;
$("#tblBodyMatrix tr").each(function ()
{
$('td', this).each(function ()
{
if ($(this).index() == 0)
{
if (contentAreaId != $(this).find('.contentAreaID').text())
{
itemsTotal = 0;
cellValueItemSum = 0;
}
contentAreaId = $(this).find('.contentAreaID').text();
}
if ($(this).index() == 1)
{
if ($(this).html() != "")
{
itemsTotal = parseInt($(this).html());
}
}
if ($(this).index() ==3)
{
var cellValue = $(this).find('input').val();
if (cellValue == null || cellValue == "")
{
cellValue = "";
}
if (cellValue != "")
{
cellValueItemSum = cellValueItemSum + parseInt(cellValue);
}
}
});
if (itemsTotal < cellValueItemSum)
{
if (eventStop == true)
{
alert("Content sub area total can't be more than content area total ! ")
uniqeQuestions.ClearCurrentRowCellsValue(this);
eventStop = false;
}
}
});
},
ClearCurrentRowCellsValue:function (tableRow)
{
$(tableRow).each(function ()
{
$('td', this).each(function ()
{
$(this).find('input').val('');
});
});
},
ValidateDuplicateContentAreaSubContentArea:function ()
{
var validationflag = true;
var contentAreaId = "";
var subContentAreaId = "";
var ddlContentArea = $('#ddlContentArea').val();
var ddlSubArea = $('#ddlSubArea').val();
$("#tblBodyMatrix tr td").each(function ()
{
if ($(this).index() == 0)
{
contentAreaId = $(this).find('.contentAreaID').text();
subContentAreaId = "";
}
if ($(this).index() == 2)
{
subContentAreaId = $(this).find('.subAreaID').text();
}
if (contentAreaId == ddlContentArea && subContentAreaId == ddlSubArea)
{
if (validationflag)
{
alert("This content area and sub content area is already added in matrix !");
validationflag = false;
contentAreaId = "";
}
}
});
return validationflag;
},
ValidateMatrixTotalRequiedItems:function ()
{
var validationflag = true;
var totalRequiredItems = parseInt($('#txtUnique').val());
var txtAreaItem = $('#txtAreaItem').val();
var getFooterTableTotal = 0;
$("#questionsMatrixTableFooter tr td").each(function ()
{
if ($(this).index() == 1)
{
if ($(this).html() != "") {
getFooterTableTotal = parseInt($(this).html());
}
}
});
var total = parseInt(getFooterTableTotal) + parseInt(txtAreaItem);
if(total > totalRequiredItems)
{
alert("Please check the required items limit and matrix items ,You are trying to add more items than the required items !");
validationflag = false;
}
return validationflag;
},
TotalRowFooter:function ()
{
var totals = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var $dataRows = $("#tblBodyMatrix tr:not('.totalColumn, .titlerow')");
$dataRows.each(function () {
$(this).find('.rowDataSd').each(function (i) {
var s = $(this).find('input').val();
if ($(this).find('input').length == 0)
{
s = $(this).html();
}
if ($.isNumeric(parseInt(s))) {
totals[i] += parseInt(s);
}
});
});
var itemsSum = 0;
$("#uniqueTableMatrix td.totalCol").each(function (i)
{
if (i != 0 && i != 1 && i != 2 && i != 3 && i !=13)
{
itemsSum = itemsSum + parseInt(totals[i]);
}
if (i == 0)
{
$(this).html("Total :");
}
else
{
if (i == 2 || i ==13)
{
if (i == 13)
{
$(this).html(itemsSum);
}
else
{
$(this).html('');
}
}
else
{
$(this).html(totals[i]);
}
}
});
}}
Below will be result
