1

Estou criando para fazer uma busca em uma tabela Bootstrap de acordo com oque o usuário seleciona em um select. Para isso eu estou colocando uma classe com o valor igual o do valor da <option> do select.

Estou usando apenas o TypeScript. SEM JQUERY.

E estou tentando fazer com um switch, mas está dando erro. Minha função está da seguinte forma:

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:
    }
}

Mas está dando um erro neste trecho:

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

No erro está escrito o seguinte:

Property 'classlist' does not exist on type 'HTMLCollectionOf < HTMLTableRowElement>'

E oque eu estou tentando fazer é verificar se a <tr> contém a classe "P", no caso. Alguém aí com mais conhecimento poderia me dar uma ajuda com opções que eu tenho para contornar este erro?

1 Resposta 1

2

No original esta:

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

Altere para:

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

Quando você chamou o método getElementsByTagName ele buscou todos os elementos com a tag 'tr' retornando uma coleção de elementos. Mas na sua comparação você esqueceu de indicar o índice do elemento que você esta acessando.

1
  • Não acredito que era só isso, um pequeno detalhe que esqueci de colocar... Obrigado
    – user153240
    Commented 28/06/2019 às 17:33

Você deve fazer log-in para responder a esta pergunta.