const setup = async() => {
let teuarray = [];
teuarray.push({id:"0",nome: "Vitor"}, {id:"1",nome: "Pedro"}, {id:"2",nome: "João"});
const lista = document.getElementById('lista');
teuarray.map((cliente)=> {
let divRowT = document.createElement("div");
divRowT.className = "row-table";
let divDivT = document.createElement("div");
divDivT.className = "div-table";
let id = document.createElement("a");
id.className = "col-table";
id.href = "https://pt.stackoverflow.com";
let idValue = document.createElement("div");
idValue.appendChild(document.createTextNode(cliente.id));
id.appendChild(idValue);
divDivT.appendChild(id);
let nome = document.createElement("a");
nome.className = "col-table";
nome.href = "https://pt.stackoverflow.com";
let nomeValue = document.createElement("div");
nomeValue.appendChild(document.createTextNode(cliente.nome));
nome.appendChild(nomeValue);
divDivT.appendChild(nome);
let divColT = document.createElement("div");
divColT.className = "col-table";
let btnExcluir = document.createElement("input");
btnExcluir.type = "button";
btnExcluir.id = "excluirUsuario";
btnExcluir.value = "Excluir";
btnExcluir.addEventListener("click", excluir, false);
divColT.appendChild(btnExcluir);
divDivT.appendChild(divColT);
divRowT.appendChild(divDivT);
lista.appendChild(divRowT);
});
}
function excluir() {
var c = document.getElementById("excluirUsuario").childNodes;
console.log(c[0]);
// let btnSelecionado = HTMLSelectElement>event.currentTarget;
// let elemento = btnSelecionado.parentElement;
// console.log(btnSelecionado, elemento);
}
.row-table-head, .div-table, .row-table{
display: grid;
grid-template-columns: 50px 180px 70px;
width: 300px;
margin: auto;
}
.row-table-head{
display: block;
}
.row-table a{
text-decoration: none;
color: #000;
}
.div-table:hover{
background-color: #a0a0a0;
}
.row-table-head .col-table{
padding: 6px 8px;
border: 1px solid #ccc;
}
.row-table .col-table{
padding: 0px 6px;
}
<body align="center" onload="setup()"> <!--retirei o setup(), pois já faço uma chamada no js-->
<h1>IMPEXPROS</h1>
<div id="lista" class="table"> <!--inclui um id pra facilitar no js-->
<div class="row-table-head">
<div style="background-color:black; color:white; font-weight:bold" class="col-table">LISTA TODOS USUARIOS</div>
</div>
</div>
</body>
Como eu faço para pegar o índex do elemento, por exemplo, quando eu apertar o botão de excluir do usuário Pedro, eu sei que ele é o 2 da lista. apenas usando js.