markdown HTML.CSS.JS.DynamicTablewJS.ex2

Posted 2021-05-05

"use strict";
// Cons: 1) user interface is a mess. 2) selection works only for the current page of the table.
// 3) possibly other bugs.
// Pros: 1) user can apply multiple search criteria and find whatever they want.
var animalTypes = ["Dog", "Cat", "Seal"];
var dogBreeds = [
    "Affenpinscher", "Afghan Hound", "Alaskan Malamute", "Basenji", "Basset Hound", 
    "Bernese Mountain Dog", "Cesky Terrier", "English Toy Spaniel", "Finnish Lapphund", 
    "German Shepherd", "Golden Retriever", "Irish Wolfhound", "Jack Russell Terrier"
];
var catBreeds = [
    "Abyssinian", "American Bobtail", "Balinese", "Bengal", "Cornish Rex", 
    "Devon Rex", "Selkirk Rex", "Siberian", "Turkish Angora"
];
var sealBreeds = [
    "Crabeater seal", "Elephant seal", "Antarctic fur seal", "Leopard seal", 
    "Leopard seal", "Ross seal", "Sea lion"
];
var nationalParks = [
    "Ebey's Landing", "Fort Vancouver", "Ice Age Floods", "Brecon Beacons", "New Forest", 
    "Dartmoor", "Peak District", "Lake District"
];
var names = [
    "Glenda", "Hilary", "Janice", "Julia", "Kaitlin", "Laura", "Lily", "Maria", "Morgan", "Niamh", 
    "Roisin", "Sandy", "Abraham", "Alistair", "Bernard", "Carl", "Chuck", "Darren", "Dwight", 
    "Gordon", "John", "Kieran", "Lance", "Lester", "Nigel", "Reece", "Ryan", "Zachary"
];
var pets = [], petsCollection = [], currentCollection = [];
var from1 = 0, to1 = 15;
function fRandomNumber(array1) { // Function to help create array of random data.
    return Math.round(Math.random() * (array1.length - 1));
}
function fAddPet() { // Function to create array of random data.
    var animal2, breed2, name2, park2, livingBeing;
    for (var i = 0; i <= 301; i++) {
        animal2 = animalTypes[fRandomNumber(animalTypes)];
        switch (animal2) {
            case "Dog":
                breed2 = dogBreeds;
                break;
            case "Cat":
                breed2 = catBreeds;
                break;
            case "Seal":
                breed2 = sealBreeds;
                break;
            default:
                breed2 = dogBreeds;
        }
        breed2 = breed2[fRandomNumber(breed2)];
        name2 = names[fRandomNumber(names)];
        park2 = nationalParks[fRandomNumber(nationalParks)];
        livingBeing = new Pet1(animal2, breed2, name2, park2);
        pets.push(livingBeing);
    }
}
function fBuildTableFromTo(petsCollection) { // Creating table.
    var theader = ["Pet Name", "Animal", "Breed", "Living At"];
    var table1 = document.createElement("table");
    var tcaption = table1.createCaption();
    var thead1 = table1.createTHead();
    var headrow1 = thead1.insertRow();
    var tbody1 = table1.createTBody();
    var tableOld = document.querySelector("table");
    var buttonPrevious = document.querySelector("input[value='Previous']");
    var pOld = document.querySelector("body > p");
    if (tableOld !== null) {
        document.body.removeChild(tableOld);
    }
    if (pOld !== null) {
        document.body.removeChild(pOld);
    }
    tcaption.innerHTML = "My Pets";
    for (var i = 0; i < theader.length; i++) {
        var hcell = headrow1.insertCell();
        hcell.scope = "col";
        hcell.innerHTML = theader[i].toUpperCase();
    }
    for (var i = from1; i < to1; i++) {
        var bodyrow1 = tbody1.insertRow();
        var bname = bodyrow1.insertCell();
        bname.innerHTML = petsCollection[i].petname; 
        var banimal = bodyrow1.insertCell();
        banimal.innerHTML = petsCollection[i].animal; 
        var bbreed = bodyrow1.insertCell();
        bbreed.innerHTML = petsCollection[i].breed; 
        var bpark = bodyrow1.insertCell();
        bpark.innerHTML = petsCollection[i].park; 
    }
    document.body.insertBefore(table1, buttonPrevious);
    fStyle(); // Applying style to the table.
}
function fStyle() { // Style for the table.
    var table1 = document.querySelector("table");
    var td1 = document.querySelectorAll("tbody td");
    var th1 = document.querySelectorAll("thead td");
    var tr1zebra = document.querySelectorAll("tbody tr:nth-child(odd)");
    td1.forEach(function(td2) {
        td2.style.padding = "10px";
    });
    th1.forEach(function(th2) {
        th2.style.padding = "10px";
        th2.style.fontWeight = "bold";
    });
    tr1zebra.forEach(function(trz) {
        trz.style.backgroundColor = "lightgray";
    });
    table1.style.border = "1px solid gray";
    //table1.style.borderCollapse = "collapse";
}
function fSelectRow() { // Select rows with specified data in each cell.
    var mFieldset = document.querySelector("form fieldset[name='option']");
    var inputFields = mFieldset.querySelectorAll("input[type='text']");
    var rows1 = document.querySelector("table").rows;
    var howManyRows = rows1.length;
    var flagMatchNotFound = true;
    var tr1even = document.querySelectorAll("tbody tr:nth-child(even)");
    var tr1odd = document.querySelectorAll("tbody tr:nth-child(odd)");
    var regXname = new RegExp(inputFields[0].value, "i");
    var regXanimal = new RegExp(inputFields[1].value, "i");
    var regXbreed = new RegExp(inputFields[2].value, "i");
    var regXliveat = new RegExp(inputFields[3].value, "i");
    tr1odd.forEach(function(trz) {
        trz.style.backgroundColor = "lightgray";
    });
    tr1even.forEach(function(trz) {
        trz.style.backgroundColor = "initial";
    });
    for (var i = 0; i < howManyRows; i++) {
        if (inputFields[0].value !== "") {
            if (!regXname.test(rows1[i].cells[0].innerText)) {
                continue;
            }
        }
        if (inputFields[1].value !== "") {
            if (!regXanimal.test(rows1[i].cells[1].innerText)) {
                continue;
            }
        }
        if (inputFields[2].value !== "") {
            if (!regXbreed.test(rows1[i].cells[2].innerText)) {
                continue;
            }
        }
        if (inputFields[3].value !== "") {
            if (!regXliveat.test(rows1[i].cells[3].innerText)) {
                continue;
            }
        }
        flagMatchNotFound = false;
        rows1[i].style.backgroundColor = "lightblue";
    }
    if (flagMatchNotFound) {
        console.log("No match was found.");
        fNoMatchWasFound();
    }
}
function fSelectText() { // Select rows which cell or cells contain particular text.
    var searchField = document.querySelector("input[type='text']");
    var searchCriterion = searchField.value;
    //console.log("SC: " + searchCriterion);
    var table1 = document.querySelector("table");
    var alltd = document.querySelectorAll("td");
    var matchNotFound = true;
    var tr1odd = document.querySelectorAll("tbody tr:nth-child(odd)");
    var tr1even = document.querySelectorAll("tbody tr:nth-child(even)");
    var regX1 = new RegExp(searchCriterion, "i");
    tr1odd.forEach(function(trz) {
        trz.style.backgroundColor = "lightgray";
    });
    tr1even.forEach(function(trz) {
        trz.style.backgroundColor = "initial";
    });
    alltd.forEach(function(td1) {
        if (regX1.test(td1.innerText)) {
            td1.parentNode.style.backgroundColor = "lightblue";
            matchNotFound = false;
        }
    });
    if (matchNotFound) {
        console.log("No match was found.");
        fNoMatchWasFound();
    }
}
function fFilterRow() { // Display rows with particular data in each cell. Function searches the initial array of data, creates new array, and then displays it.
    var inputFields = document.querySelectorAll("form input[type='text']");
    var regXanimal, regXbreed, regXliveat, regXname;
    var petname1 = inputFields[0].value;
    var animal1 = inputFields[1].value;
    var breed1 = inputFields[2].value;
    var liveat1 = inputFields[3].value;
    if (petname1 === "") {
        regXname = /[abc]/i;
    } else {
        regXname = new RegExp(petname1, "i");
    }
    if (animal1 === "") {
        regXanimal = /[abc]/i;
    } else {
        regXanimal = new RegExp(animal1, "i");
    }
    if (breed1 === "") {
        regXbreed = /[abc]/i;
    } else {
        regXbreed = new RegExp(breed1, "i");
    }
    if (liveat1 === "") {
        regXliveat = /[abc]/i;
    } else {
        regXliveat = new RegExp(liveat1, "i");
    }
    pets.forEach(function(pts) {
        if ((regXanimal.test(pts.animal)) && (regXbreed.test(pts.breed)) && (regXliveat.test(pts.park)) && (regXname.test(pts.petname))) {
            petsCollection.push(pts);
        }
    });
    if (petsCollection.length === 0) {
        console.log("No match was found");
        fNoMatchWasFound();
    } else {
        currentCollection = petsCollection;
        fBuildTableFromTo(petsCollection);
    }
}
function fFilterText() { // Display rows which cells contain particular text. Function searches the initial array of data, creates new array, and then displays it.
    var inputField = document.querySelector("input[type='text']");
    var regX1;
    if (inputField.value === "") {
        regX1 = /[abc]/i;
    } else {
        var regX1 = new RegExp(inputField.value, "i");
    }
    pets.forEach(function(pts) {
        for (var i in pts) {
            if (regX1.test(pts[i])) {
                petsCollection.push(pts);
            }
        }
    });
    if (petsCollection.length === 0) {
        console.log("No match was found");
        fNoMatchWasFound();
    } else {
        currentCollection = petsCollection;
        fBuildTableFromTo(petsCollection);
    }
}
function fClearPreviousFieldset() {
    var mForm = document.querySelector("form");
    var mOldFieldset = document.querySelector("fieldset[name='option']");
    if (mOldFieldset !== null) {
        mForm.removeChild(mOldFieldset);
    }
}
function fUIselectText() { // Interface for selecting rows with specific text.
    var mForm = document.querySelector("form");
    var mMainFieldset = document.querySelector("fieldset[name='main']");
    var mFieldset = document.createElement("fieldset");
    var mFieldsetLegend = document.createElement("legend");
    var mFieldsetLegendText = document.createTextNode("Find particular text in cells and select these rows");
    var mTextArea = document.createElement("input");
    var mButton = document.createElement("input");
    fClearPreviousFieldset();
    mTextArea.type = "text";
    mTextArea.placeholder = "Text you are searching for";
    mTextArea.size = "40";
    mTextArea.style.marginRight = "5px";
    mButton.type = "button";
    mButton.value = "Search!";
    mButton.style.marginRight = "5px";
    mButton.addEventListener("click", fSelectText, false);
    mFieldset.name = "option";
    mFieldsetLegend.appendChild(mFieldsetLegendText);
    mFieldset.appendChild(mFieldsetLegend);
    mFieldset.appendChild(mTextArea);
    mFieldset.appendChild(mButton);
    mForm.appendChild(mFieldset);
}
function fUIselectRow() { // Interface for selecting rows which met all search criteria.
    var inputFields = [
        {
            label: "Pet Name"
        },
        {
            label: "Animal"
        },
        {
            label: "Breed"
        },
        {
            label: "Living At"
        }
    ];
    var mForm = document.querySelector("form");
    var mFieldset = document.createElement("fieldset");
    var mFieldsetLegend = document.createElement("legend");
    var mFieldsetLegendText = document.createTextNode("Select search criterion for each column");
    var mButton = document.createElement("input");
    fClearPreviousFieldset();
    mFieldset.name = "option";
    for (var i = 0; i < 4; i++) {
        var mLabel1 = document.createElement("label");
        var mLabelText = document.createTextNode(inputFields[i].label);
        var mInput = document.createElement("input");
        var mBr = document.createElement("br");
        mInput.type = "text";
        mLabel1.style.display = "inline-block";
        mLabel1.style.marginBottom = "5px";
        mLabel1.appendChild(mInput);
        mLabel1.appendChild(mLabelText);
        mFieldset.appendChild(mLabel1);
        mFieldset.appendChild(mBr);
    }
    mButton.type = "button";
    mButton.value = "Search!";
    mButton.addEventListener("click", fSelectRow, false);
    mFieldset.appendChild(mButton);
    mForm.appendChild(mFieldset);
}
function fUIfilterRow() { // Interface for filtering rows which met all search criteria.
    var inputFields = [
        {
            label: "Pet Name"
        },
        {
            label: "Animal"
        },
        {
            label: "Breed"
        },
        {
            label: "Living At"
        }
    ];
    var mForm = document.querySelector("form");
    var mFieldset = document.createElement("fieldset");
    var mFieldsetLegend = document.createElement("legend");
    var mFieldsetLegendText = document.createTextNode("Define search criterion for each column and display the result");
    var mButton = document.createElement("input");
    fClearPreviousFieldset();
    mFieldset.name = "option";
    for (var i = 0; i < 4; i++) {
        var mLabel1 = document.createElement("label");
        var mLabelText = document.createTextNode(inputFields[i].label);
        var mInput = document.createElement("input");
        var mBr = document.createElement("br");
        mInput.type = "text";
        mLabel1.style.display = "inline-block";
        mLabel1.style.marginBottom = "5px";
        mLabel1.appendChild(mInput);
        mLabel1.appendChild(mLabelText);
        mFieldset.appendChild(mLabel1);
        mFieldset.appendChild(mBr);
    }
    mButton.type = "button";
    mButton.value = "Search!";
    mButton.addEventListener("click", fFilterRow, false);
    mFieldset.appendChild(mButton);
    mForm.appendChild(mFieldset);
}
function fUIfilterText() { // Interface for filtering rows with specific text in them.
    var mForm = document.querySelector("form");
    var mMainFieldset = document.querySelector("fieldset[name='main']");
    var mFieldset = document.createElement("fieldset");
    var mFieldsetLegend = document.createElement("legend");
    var mFieldsetLegendText = document.createTextNode("Find particular text in cells and display these rows");
    var mTextArea = document.createElement("input");
    var mButton = document.createElement("input");
    fClearPreviousFieldset();
    mTextArea.type = "text";
    mTextArea.placeholder = "Text you are searching for";
    mTextArea.size = "40";
    mTextArea.style.marginRight = "5px";
    mButton.type = "button";
    mButton.value = "Search!";
    mButton.style.marginRight = "5px";
    mButton.addEventListener("click", fFilterText, false);
    mFieldset.name = "option";
    mFieldsetLegend.appendChild(mFieldsetLegendText);
    mFieldset.appendChild(mFieldsetLegend);
    mFieldset.appendChild(mTextArea);
    mFieldset.appendChild(mButton);
    mForm.appendChild(mFieldset);
}
function fMainUI() { // Interface for selecting search method.
    var mForm = document.createElement("form");
    var mFieldset = document.createElement("fieldset");
    var mFieldsetLegend = document.createElement("legend");
    var mFieldsetLegendText = document.createTextNode("Search Options");
    var aRadio = [
        {
            value: "select text",
            text: "Find specific text and select rows which contain it"
        },
        {
            value: "select row",
            text: "Select row which cells contain specific text"
        },
        {
            value: "filter text",
            text: "Display rows with specific text in them"
        },
        {
            value: "filter row",
            text: "Filter rows which met all criteria"
        }
    ];
    mFieldset.name = "main";
    mFieldsetLegend.appendChild(mFieldsetLegendText);
    mFieldset.appendChild(mFieldsetLegend);
    for (var i = 0; i < 4; i++) {
        var mLabel1 = document.createElement("label");
        var mLabelText = document.createTextNode(aRadio[i].text);
        var mRadio1 = document.createElement("input");
        var mBr = document.createElement("br");
        mRadio1.type = "radio";
        mRadio1.name = "sopt";
        mRadio1.value = aRadio[i].value;
        if (i === 0) {
            mRadio1.checked = true;
        }
        mLabel1.appendChild(mRadio1);
        mLabel1.appendChild(mLabelText);
        mFieldset.appendChild(mLabel1);
        mFieldset.appendChild(mBr);
    }
    mFieldset.addEventListener("change", fWhichMethod, false);
    mForm.appendChild(mFieldset);
    document.body.appendChild(mForm);
}
function fWhichMethod(evt) { // Triggered when a user selects some radio button in UImain.
    //var whichRadioChecked = document.querySelector("form fieldset[name='option'] input:checked");
    var whichRadioChecked = document.querySelector("input:checked");
    console.log("Checked: " + whichRadioChecked.value);
    switch(whichRadioChecked.value) {
        case "select text":
            currentCollection = pets;
            fBuildTableFromTo(pets);
            fUIselectText();
            break;
            case "select row":
            currentCollection = pets;
            fBuildTableFromTo(pets);
            fUIselectRow();
            break;
        case "filter text":
            fUIfilterText();
            break;
        case "filter row":
            fUIfilterRow();
            break;
        default:
            fUIselectText();
    }
}
function fNoMatchWasFound() { // Display message 'No match was found'.
    var table1 = document.querySelector("table");
    var pOld = document.querySelector("body > p");
    var p1 = document.createElement("p");
    var p1text = document.createTextNode("No match was found.");
    if (table1 !== null) {
        document.body.removeChild(table1);
    }
    if (pOld !== null) {
        document.body.removeChild(pOld);
    }
    p1.appendChild(p1text);
    document.body.appendChild(p1);
}
function fPaginationUI() { // Buttons to list the table page by page.
    var bPrevious = document.createElement("input");
    var bNext = document.createElement("input");
    bPrevious.type = "button";
    bPrevious.value = "Previous";
    bPrevious.addEventListener("click", fPreviousPage, false);
    bPrevious.disabled = true;
    bNext.type = "button";
    bNext.value = "Next";
    bNext.addEventListener("click", fNextPage, false);
    document.body.appendChild(bPrevious);
    document.body.appendChild(bNext);
}
function fPreviousPage() { // Make settings to display previous page.
    if (to1 === currentCollection.length) {
        var buttonNext = document.querySelector("input[value='Next']");
        buttonNext.disabled = false;
    }
    if (from1 !== 0) {
        from1 -= 15;
        to1 = from1 + 15;
        if (from1 === 0) {
            var buttonPr = document.querySelector("input[value='Previous']");
            buttonPr.disabled = true;
        }
    }
    console.log("from1: " + from1 + ", to1: " + to1);
    fBuildTableFromTo(currentCollection);
}
function fNextPage() { // Make settings to display next page.
    if (from1 === 0) {
        var buttonPr = document.querySelector("input[value='Previous']");
        buttonPr.disabled = false;
    }
    if (to1 < currentCollection.length) {
        from1 += 15;
        if (from1 + 15 > currentCollection.length) {
            var buttonNext = document.querySelector("input[value='Next']");
            buttonNext.disabled = true;
            to1 = currentCollection.length;
        } else {
            to1 = from1 + 15;
        }
    }
    console.log("from1: " + from1 + ", to1: " + to1);
    fBuildTableFromTo(currentCollection);
}
class Pet1 {
    constructor(animal1, breed1, name1, park1) {
        this.animal = animal1;
        this.breed = breed1;
        this.petname = name1;
        this.park = park1;
    }
}
fMainUI();
fUIselectText();
fAddPet();
currentCollection = pets;
fPaginationUI();
fBuildTableFromTo(pets, 0, pets.length);

HTML.CSS.JS.DynamicTablewJS.ex2
-------------------------------


A [Pen](https://codepen.io/Onlyforbopi/pen/mGNaQm) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).

[License](https://codepen.io/Onlyforbopi/pen/mGNaQm/license).