Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Ordenar tabela do js

Tenho uma tabela que crio através do js e eu queria que o indice dela ordenasse o resto


const btnAdd = document.querySelector("#insert-item_button");
const date = document.querySelector("#inputDate")


date.addEventListener("focus", function (event) {
    date.value = "__/__/____"
    setTimeout(function () {
        date.setSelectionRange(0, 0)
    }, 1)
})


date.addEventListener("keydown", function(event) {
    event.preventDefault()
    if("0123456789".indexOf(event.key) !== -1
        && this.value.indexOf("_") !== -1) {
            this.value = this.value.replace(/_/, event.key)
            const next_index = this.value.indexOf("_")
            this.setSelectionRange(next_index, next_index)
    } else if (event.key === "Backspace") {
        this.value = this.value.replace(/(\d$)|(\d(?=\D+$))/, "_")
        const next_index = this.value.indexOf("_")
        this.setSelectionRange(next_index, next_index)
    }
})



btnAdd.addEventListener("click", function (event) {



    event.preventDefault()



    const form = document.querySelector("#form_insert-item")


    console.log(form.inputNumber.value)
    console.log(form.selectForm.value)

    const time = form.inputNumber.value + "h"
    const select = form.selectForm.value
    const date = form.inputDate.value

    // criei a linha
    const tableTr = document.createElement("tr")



    // cria as colunas
    const timeTd = document.createElement("td")
    const selectTd = document.createElement("td")
    const dateTd = document.createElement("td")

    //**Adiciona uma classe ao que vc quer recuperar depois
    timeTd.className = "tempo-exercicio"
    tableTr.className = "tr-cor"

    // altera o valor das tds com os input value
    timeTd.textContent = time;
    selectTd.textContent = select;
    dateTd.textContent = date;

    // cria uma linha para cada coluna
    tableTr.appendChild(timeTd)
    tableTr.appendChild(selectTd)
    tableTr.appendChild(dateTd)




    // validação dos campos
    if (inputNumber.value === undefined || inputNumber.value === null || inputNumber.value === "" || inputNumber.value === " ") {
        alert("Insira as horas")
        inputNumber.focus();
        return false;
    }else if (inputDate.value === "__/__/____" || inputDate.value === null || inputDate.value === undefined || inputDate.value === "" || inputDate.value === " "){
        alert("Insira a data") 
        inputDate.focus();
        return false;
    }



    // validação da data




    // cria uma div para colocar o botao delete e insere ele com inner 
    const btnDeleteTask = document.createElement("div")
    btnDeleteTask.className = "btnDeleteTask"
    btnDeleteTask.innerHTML = `x`

    //Botao excluir tarefas 
    btnDeleteTask.addEventListener("click", function (eventdelete) {
        eventdelete.preventDefault()
        tableTr.remove()
        resultado.textContent = calcular()
    })

    tableTr.appendChild(btnDeleteTask)


    const table = document.querySelector("#table-activits")
    table.appendChild(tableTr)


    var resultado = document.querySelector(".resultado")
    resultado.textContent = calcular()





})


function calcular() {

    var listaTemposExercicios = document.querySelectorAll(".tempo-exercicio"); //Tem que retornar um array com todos os tempos
    var texto = "hous of exercises"
    var espaco = " "
    var totalTempo = 0

    for (elemento of listaTemposExercicios) {
        totalTempo += parseInt(elemento.textContent)
    }


    return (totalTempo + espaco + texto)
}

3 respostas

Boa noite, Beatriz! Como vai?

O que seria esse tal índice que vc se refere? É um valor numérico? Outra coisa, como é o formato dos dados que irão aparecer nessa tabela?

Com essas informações eu poderei te ajudar de uma forma mais efetiva!

solução!

Consegui através de uma biblioteca, mas obrigada pela a disposição :)

Por nada, Beatriz! Sempre que tiver qualquer dúvida é só mandar aqui no fórum!

Grande abraço e bons estudos!