How to reload an HTML table and its data after the click of a button using javascript?

Asked

Viewed 197 times

-1

I am making a form in HTML and at a certain point add some information and step to an Array in javascript through an onclick function on a button and after that I would like the information that is in this Array to be reloaded every click in the following table:

<div class="form-row" id="tabelaCursos" style="display: none;">

            <div class="col-md-8 mb-3">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th scope="col">Curso</th>
                            <th scope="col">Duração</th>
                            <th scope="col">Instituição</th>
                        </tr>
                    </thead>
                    <tbody>
                        <script>
                        for (var i = 0; i < listaCursos.length; i++) {
                            var item = listaCursos[i];
                            alert("Entrou"+item.Nome)
                            document.write("<tr><td>"+item.Nome+"</td><td>"+item.Duracao+"</td><td>"+item.Instituicao+"</td></tr>")
                        </script>
                    </tbody>
                </table>
            </div>
</div>

I’m using a for to get the data from this array, however it needs to be reloaded every new course added to this array, how can I do this?

Onclick function code on button:

<button class="btn btn-primary" type="button" style="margin-top: 31px;"
                    onclick="cadastrarCurso()">Adicionar</button>

function cadastrarCurso() {
                    document.getElementById("tabelaCursos").style.display = 'block';
                    var nome = (document.getElementById("curso").value);
                    var duracao = (document.getElementById("duracao").value);
                    var instituicao = (document.getElementById("instituicao").value);

                    var curso = new Curso();
                    curso.SetNome(nome);
                    curso.SetDuracao(duracao);
                    curso.SetInstituicao(instituicao)

                    addLista(curso)

                }

function addLista(curso) {
listaCursos = [curso]
}
javascript html javascript-events
  • 1

    You can create a function that displays this table, rather than leaving it ready in HTML, as soon as the onclick event triggers you to call this function and pass the array with the data as parameter. That’s how I usually do it.

  • "through an onclick function on a button" ... can you show this function? This function will change the listaCursos?

  • @Gabrielfernandes, but then I would use a Document.write in this function?

  • @Sergio added the function called in onclick

  • Shouldn’t be listaCursos = listaCursos.concat(curso); or listaCursos.push(curso) instead of listaCursos = [curso]?

  • Yes, that’s right @Sergio was a mistake, I’ve updated

Show 1 more comment

1 answer

0

The solution found for the problem was to make a call to another function at the click of the button:

<button class="btn btn-primary" type="button" style="margin-top: 31px;"
                    onclick="cadastrarCurso();exibirDadosTabela()">Adicionar</button>

innerHTML was used in the function displayDadosTable() to create the column code with its data:

function exibirDadosTabela(){
                                var stringAux = ""
                                for (var i = 1; i < listaCursos.length; i++) {
                                    var item = listaCursos[i];
                                    stringAux += "<tr><td>"+item.Nome+"</td><td>"+item.Duracao+"</td><td>"+item.Instituicao+"</td></tr>";
                                }
                                document.getElementById("corpoTabela").innerHTML = stringAux
                            }

The addList() function code has also been changed to:

function addLista(curso) {
                    listaCursos.push(curso)
                }

Browser other questions tagged javascript html javascript-events

You are not signed in. Login or sign up in order to post.