Replicate code with JS

Asked

Viewed 71 times

-1

How do I replicate the div class Row-tablet with js? I have an array with users and I know the amount, but I don’t know how to replicate all the div and everything inside it.

.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()">
        <h1>IMPEXPROS</h1>

        <div class="table">
          <div class="row-table-head">
            <div style="background-color:black; color:white; font-weight:bold" class="col-table">LISTA TODOS USUARIOS</div>
          </div>
          <div class="row-table">
            <div class="div-table">
              <a href="" class="col-table">
                  <div>9999</div>
              </a>
              <a href="" class="col-table">
                  <div>vitorpereira</div>
              </a>
              <div class="col-table">
                <input type="button" id="excluirUsuario" value="Excluir">
              </div>
            </div>
          </div>
        </div>
  </body>

javascript

  • I think you can remove this css code from the question so as not to confuse people who can help you since the question has no relation to it. Now about the question have you tried anything? Post the code as far as you have so far.

  • Where do you want to replicate it? One below the other?

  • Victor, I put the css to the person understands that it’s like a table, I haven’t tried anything because I don’t know which function that replicates.

  • Taffarel, that’s right, will create each row of the table according to the amount of users q have in the array.

  • You want to replicate the entire div or its contents?

  • I will replicate the entire div, pq created a table with Divs, the data I will add while replaying the row.

Show 1 more comment

2 answers

2

To duplicate an element use the method cloneNode();. This method has a Boolean argument where true the copy is complete and when it is false the copy is only superficial.

To add the already duplicated element use the method appendChild() adding a node to the end of the child list of a specified parent node.

var tabela = document.getElementById("tabela");  //Elemento em que os clones serão adicionados.
var div = document.getElementById("duplicavel"); //Elemento a ser clonado.

//Por 10 vezes...
for (item in [...Array(10)]) {
  tabela.appendChild(div.cloneNode(true)); //..clona e adiciona.
}
.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()"><!-- Comentei setup() pois estava dando erro -->
  <h1>IMPEXPROS</h1>

  <div id="tabela" class="table">
    <div class="row-table-head">
      <div style="background-color:black; color:white; font-weight:bold" class="col-table">LISTA TODOS USUARIOS</div>
    </div>
    <div id="duplicavel" class="row-table">
      <div class="div-table">
        <a href="" class="col-table">
          <div>9999</div>
        </a>
        <a href="" class="col-table">
          <div>vitorpereira</div>
        </a>
        <div class="col-table">
          <input type="button" id="excluirUsuario" value="Excluir">
        </div>
      </div>
    </div>
  </div>
</body>

  • Augusto, thanks! worked as expected too! and simpler than Ewerton! but with his I can manipulate more things.

  • @Vitorpereira, use the DOM(Document Object Model) to manipulate object values.

  • 1

    Augusto I’m still starting in JS, there are things like DOM that I don’t know, I have little practice in this, but I will use your answer in another situation that you had here that I just need to replicate a few lines. Most grateful!

1


To do this with Javascript, it will be necessary to recreate the elements.
It’ll stay that way:

class Clientes 
{
    constructor() 
    {
    	let teuarray = [{id:'1',nome: 'Humberto'}, {id:'2',nome: 'Doisberto'}];
		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://answall.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://answall.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"
	    	divColT.appendChild(btnExcluir);
	    	divDivT.appendChild(divColT);

	    	divRowT.appendChild(divDivT);
	    	lista.appendChild(divRowT);
    	});
    }

}

window.onload = event => {
  let clientes = new Clientes();
  clientes.show();
};
.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"> <!--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 class="row-table">
            <div class="div-table">
              <a href="" class="col-table">
                  <div>9999</div>
              </a>
              <a href="" class="col-table">
                  <div>vitorpereira</div>
              </a>
              <div class="col-table">
                <input type="button" id="excluirUsuario" value="Excluir">
              </div>
            </div>
          </div> -->
        </div>
  </body>

I have a Typescript-like design on my Github. Take a look, it can help you. here the link

  • It worked too well! however I had to put its function inside my setup, because I make a scheme of Promise to take some data via web, and by class is not async.. but it worked as expected! thanks Ewerton

  • I figured, since I didn’t know exactly what your goal was, I tried to do something that could be changed more easily. There are libraries that help in this, when it is not a big project, I prefer to do without them, but if I want to point out the Handlebars link

  • Thanks for the tip, but I’m creating this page for an Arduino, I have very little memory to add libraries, so I prefer to do everything in js simple even if the browser itself can solve the functions not to overload the Arduino. I’m having a hard time getting the index from the delete button, you know how I can get?

  • Want to insert a function to delete each item by the respective button? Check my project, I insert an Eventlistener in each button

  • Exactly, I took a look, but manjo very little of DOM, I put it inside the delete function: "Let btnSelected = <Htmlselectelement>Event.currentTarget;" and returns me the following error: "Syntaxerror: Unexpected token '<'"

  • Ah yes hehe is because it is in typescript, remove this tag

  • Let’s go continue this discussion in chat.

Show 2 more comments

Browser other questions tagged javascript

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