Check if a tag has a class using Typescript

Question

I am creating to do a search in a Bootstrap table according to what the user selects in a select. For this I am putting a class with the value equal to the value of <option> of select.

I’m only using Typescript. JQUERY-FREE.

And I’m trying to do with a switch, but is giving error. My function is as follows:

function mudarPesquisaSelect() {
    var tr = document.getElementById('tbody').getElementsByTagName('tr');
    var valorSelect = (<HTMLInputElement>document.getElementById("grupo"));

    switch (valorSelect.value) {

        case "P":
            for (var ab = 0; ab < (tr.length - 1); ab++) {
                if (tr.classList.contains('P')) {
                    tr[ab].style.display = "";
                } else {
                    tr[ab].style.display = "none";
                }
            }
            break;

        case "A":
            for (var ab = 0; ab < (tr.length - 1); ab++) {
                if (tr.classList.contains('A')) {
                    tr[ab].style.display = "";
                } else {
                    tr[ab].style.display = "none";
                }
            }
            break;
        case "S":
            for (var ab = 0; ab < (tr.length - 1); ab++) {
                if (tr.classList.contains('S')) {
                    tr[ab].style.display = "";
                } else {
                    tr[ab].style.display = "none";
                }
            }
            break;
        case "F":
            for (var ab = 0; ab < (tr.length - 1); ab++) {
                if (tr.classList.contains('F')) {
                    tr[ab].style.display = "";
                } else {
                    tr[ab].style.display = "none";
                }
            }
            break;
        case "T":
            for (var ab = 0; ab < (tr.length - 1); ab++) {
                if (tr.classList.contains('T')) {
                    tr[ab].style.display = "";
                } else {
                    tr[ab].style.display = "none";
                }
            }
            break;
        case "O":
            for (var ab = 0; ab < (tr.length - 1); ab++) {
                if (tr.classList.contains('O')) {
                    tr[ab].style.display = "";
                } else {
                    tr[ab].style.display = "none";
                }
            }
            break;
        case "All":
            for (var ab = 0; ab < (tr.length - 1); ab++) {
                if (tr.classList.contains('All')) {
                    tr[ab].style.display = "";
                } else {
                    tr[ab].style.display = "none";
                }
            }
        break;

        default:
    }
}

But you’re making a mistake in this part:

if (tr.classList.contains(className)) {

In the error is written the following:

Property 'classlist' does not exist on type 'Htmlcollectionof < Htmltablerowelement>'

And what I’m trying to do is make sure <tr> contains the "P" class in the case. Someone there with more knowledge could give me a help with options I have to circumvent this error?

Answer 1

In the original this:

if (tr.classList.contains(className)) {

Change to:

if (tr[ab].classList.contains(className)) {

When you called the method getElementsByTagName he searched all elements with the tag 'tr' returning a collection of elements. But in your comparison you forgot to indicate the index of the element you are accessing.