1. If you have data in array list then copy below function and modify as per your requirement.
function ShowFinalTable()
{
var finalQuestionArrayList = new Array();
var questionNoArrayList = new Array();
var finalFormSetTableArrayList = new Array();
var itemInformationArrayList = new Array();
var difficlityArrayList = new Array();
var complexityArrayList = new Array();
var conareatextArrayList = new Array();
var subcontentareatextArrayList = new Array();
for (var i = 0; i < preTest_formSetsQuations.length; i++)
{
var formSet = {};
formSet.FormSet = "Pre-Test";
formSet.Question = preTest_formSetsQuations[i];
finalQuestionArrayList.push(formSet);
}
for (var i = 0; i < anchor_formSetsQuations.length; i++)
{
var formSet = {};
formSet.FormSet = "Anchor";
formSet.Question = anchor_formSetsQuations[i];
finalQuestionArrayList.push(formSet);
}
for (var i = 0; i < unique_formSetsQuations.length; i++)
{
var formSet = {};
formSet.FormSet = unique_formSetsQuations[i].FormSet;
formSet.Question = unique_formSetsQuations[i].Question;
finalQuestionArrayList.push(formSet);
}
var items = completeUniqueQuestionBankArray;
var txtquestionNo= "<br /><select type='text' id='txtquestionNo' class='rowSearchHeader' style='display:none' onchange='searchRows(tableFinalResult)'></select>";
var txtFormSet = "<br /><select type='text' id='ddlFinalFormSet' class='rowSearchHeader' onchange='searchRows(tableFinalResult)'></select>";
var txtcontentArea = "<br /><select type='text' id='txtcontentArea' class='rowSearchHeader' onchange='searchRows(tableFinalResult)'></select>";
var txtsubContentArea = "<br /><select type='text' id='txtsubContentArea' class='rowSearchHeader' onchange='searchRows(tableFinalResult)'></select>";
var txtitemInformation = "<br /><select type='text' id='txtitemInformation' class='rowSearchHeader' onchange='searchRows(tableFinalResult)'></select>";
var txtdifficulty = "<br /><select type='text' id='txtdifficulty' class='rowSearchHeader' onchange='searchRows(tableFinalResult)'></select>";
var txtcomplexity = "<br /><select type='text' id='txtcomplexity' class='rowSearchHeader' onchange='searchRows(tableFinalResult)'></select>";
var tbody = "<div id='mainTablearea1'><table cellpadding='0' id='tableFinalResult' cellspacing='0' border='0' id='table' class='tinytable table table-bordered'></div><thead><tr style='background-color: #16629e;color: white;font-size: 11px;'><th class='nosort'>" + $('#colRequeNo').val() + txtquestionNo + "</th><th>FormSet" + txtFormSet + "</th><th>Content Area" + txtcontentArea + "</th><th>Sub Content Area" + txtsubContentArea + "</th><th>Item Information" + txtitemInformation + "</th><th>Difficulty" + txtdifficulty + "</th><th>Complexity" + txtcomplexity + "</th></tr></thead><tbody id='searchDatafinal' style='font-size: 11px;background-color: #fff;'>";
var tr = "<tr class='rowSearch'>";
var questionNo = "";
for (var i = 0; i < items.length; i++)
{
var indexValue = finalQuestionArrayList.findIndex(x => x.Question == items[i].ID);
var valueOfFormSet = "";
if (indexValue != -1)
{
valueOfFormSet = finalQuestionArrayList[indexValue].FormSet;
questionNo = items[i].ID;
var itemInformation = items[i].ItemInformation;
if (itemInformation == null) {
itemInformation = "";
}
var difficlity = items[i].DifficulityText;
if (difficlity == null) {
difficlity = "";
}
var complexity = items[i].ComplexityText;
if (complexity == null) {
complexity = "";
}
var conareatext = items[i].ContentAreaText;
if (conareatext == null) {
conareatext = "";
}
var subcontentareatext = items[i].SubContentAreaText;
if (subcontentareatext == null) {
subcontentareatext = "";
}
tr = tr + "<td><a>" + questionNo + " </a></td><td>" + valueOfFormSet + "</td><td>" + conareatext + "</td><td>" + subcontentareatext + "</td><td>" + itemInformation + "</td><td>" + difficlity + "</td><td>" + complexity + "</td></tr>";
if (questionNoArrayList.toString().indexOf(questionNo) == -1)
{
questionNoArrayList.push(questionNo);
}
if (finalFormSetTableArrayList.toString().indexOf(valueOfFormSet) == -1)
{
finalFormSetTableArrayList.push(valueOfFormSet);
}
if (itemInformationArrayList.toString().indexOf(itemInformation) == -1) {
itemInformationArrayList.push(itemInformation);
}
if (difficlityArrayList.toString().indexOf(difficlity) == -1) {
difficlityArrayList.push(difficlity);
}
if (complexityArrayList.toString().indexOf(complexity) == -1) {
complexityArrayList.push(complexity);
}
if (conareatextArrayList.toString().indexOf(conareatext) == -1) {
conareatextArrayList.push(conareatext);
}
if (subcontentareatextArrayList.toString().indexOf(subcontentareatext) == -1) {
subcontentareatextArrayList.push(subcontentareatext);
}
}
}
var completebody = tbody +tr + "</tr></tbody></table>";
var dvTable = $("#mainDivFinalTable");
dvTable.html("");
//Append HTML in Main Div Area
dvTable.append(completebody);
$('#txtquestionNo').append('<option value="0">Select...</option>');
for (var index = 0; index < questionNoArrayList.length; index++)
{
$('#txtquestionNo').append('<option value="' + questionNoArrayList[index] + '">' + questionNoArrayList[index] + '</option>');
}
$('#ddlFinalFormSet').append('<option value="0">Select...</option>');
for (var index = 0; index < finalFormSetTableArrayList.length; index++) {
$('#ddlFinalFormSet').append('<option value="' + finalFormSetTableArrayList[index] + '">' + finalFormSetTableArrayList[index] + '</option>');
}
$('#txtcontentArea').append('<option value="0">Select...</option>');
for (var index = 0; index < conareatextArrayList.length; index++) {
$('#txtcontentArea').append('<option value="' + conareatextArrayList[index] + '">' + conareatextArrayList[index] + '</option>');
}
$('#txtsubContentArea').append('<option value="0">Select...</option>');
for (var index = 0; index < subcontentareatextArrayList.length; index++) {
$('#txtsubContentArea').append('<option value="' + subcontentareatextArrayList[index] + '">' + subcontentareatextArrayList[index] + '</option>');
}
$('#txtitemInformation').append('<option value="0">Select...</option>');
for (var index = 0; index < itemInformationArrayList.length; index++) {
$('#txtitemInformation').append('<option value="' + itemInformationArrayList[index] + '">' + itemInformationArrayList[index] + '</option>');
}
$('#txtdifficulty').append('<option value="0">Select...</option>');
for (var index = 0; index < difficlityArrayList.length; index++) {
$('#txtdifficulty').append('<option value="' + difficlityArrayList[index] + '">' + difficlityArrayList[index] + '</option>');
}
$('#txtcomplexity').append('<option value="0">Select...</option>');
for (var index = 0; index < complexityArrayList.length; index++) {
$('#txtcomplexity').append('<option value="' + complexityArrayList[index] + '">' + complexityArrayList[index] + '</option>');
}
}
2. Copy below method and change the control header according to requirement .
in below script added the dropdown in header to filter the data but if you want to change to text box then replace select with input
function searchRows(tblId) {
var tbl = document.getElementById('tableFinalResult');
var headRow = tblId.rows[0];
var arrayOfHTxt = new Array();
var arrayOfHtxtCellIndex = new Array();
for (var v = 0; v < headRow.cells.length; v++) {
if (headRow.cells[v].getElementsByTagName('select')[0])
{
var Htxtbox = headRow.cells[v].getElementsByTagName('select')[0];
if (Htxtbox.value != 0) {
if (Htxtbox.value.replace(/^\s+|\s+$/g, '') != '') {
arrayOfHTxt.push(Htxtbox.value.replace(/^\s+|\s+$/g, ''));
arrayOfHtxtCellIndex.push(v);
}
}
}
}
for (var i = 1; i < tbl.rows.length; i++) {
tbl.rows[i].style.display = 'table-row';
for (var v = 0; v < arrayOfHTxt.length; v++) {
var CurCell = tbl.rows[i].cells[arrayOfHtxtCellIndex[v]];
var CurCont = CurCell.getElementsByTagName('span')[0];
var reg = new RegExp(arrayOfHTxt[v] + ".*", "i");
if (!CurCont) {
CurCont = tbl.rows[i].cells[arrayOfHtxtCellIndex[v]];
}
if (CurCont.innerHTML.match(reg) == null) {
tbl.rows[i].style.display = 'none';
}
}
}
}
3. Below will be result
