Creating Table from Javascript how to insert a Button element?

Asked

Viewed 118 times

0

Good night all right ?

I’m trying to create a direct table in Java and include a column with a button, but I couldn’t create it the way I need to.

the most I could was to put the button has all the cells of the table, but I need to put only in the first column

could help me?

function criarTabela(conteudo) {
  var tabela = document.createElement("table");
  var thead = document.createElement("thead");
  var tbody=document.createElement("tbody");
  var thd=function(i){return (i==0)?"th":"td";};
  for (var i=0;i<conteudo.length;i++) {
    var tr = document.createElement("tr");
    for(var o=0;o<conteudo[i].length;o++){
      var t = document.createElement(thd(i));
      t.innerHTML = "<td><button onclick='alert('$id')'>$id</button></td>"
      var texto=document.createTextNode(conteudo[i][o]);
      t.appendChild(texto);
      tr.appendChild(t);
    }
    (i==0)?thead.appendChild(tr):tbody.appendChild(tr);
  }
  tabela.appendChild(thead);
  tabela.appendChild(tbody);
  return tabela;
}
document.getElementById("tabela").appendChild(criarTabela([
  ["id", "nome",     "idade"],
  [1,    "matheus",  16],
  [2,    "cristian", 16],
  [3,    "pedro",    10],
  [4,    "henrique", 10]
]));
<div id="tabela"></div>

javascript table

  • because it does not use a if(o==0) to know that it is the first column?

  • would look like this? if(o==0) t.innerHTML = "<td><button onclick='Alert('1')'>id</button></td>"

2 answers

3


Hello, I created in a simpler way, I hope you like it. Follow code:

  <table id="table"></table>

  <script>
const getTable = document.querySelector('table');
const arrNewTr = [];
const arr = [
  { id: 1, nome: 'matheus', idade: 16 },
  { id: 2, nome: 'cristian', idade: 17 },
  { id: 3, nome: 'pedro', idade: 18 },
  { id: 4, nome: 'eliana', idade: 19 },
  { id: 5, nome: 'joão', idade: 20 },
];

const clickId = (val) => {
  alert(val);
};

const createTr = () => {
  arr.forEach((item, i) => {
    arrNewTr.push(`
        <tr>
          <td>${item.id}</td>  
          <td>${item.nome}</td>  
          <td>${item.idade}</td>
          <td><button onclick="clickId(${item.id})">Clica aqui</button></td>  
        </tr>
      `)
  });
  return arrNewTr.join(' ');
};

const createTable = () => {
  return `
    <thead>
      <th>Id</th>
      <th>Nome</th>
      <th>Idade</th>
      <th>Ações</th>
    </thead>
    <tbody>
      ${createTr()}
    </tbody>
  `;
};

getTable.innerHTML = createTable();

The example running is found here: https://jsfiddle.net/s8Lmoa4k/

Good studies!

  • thank you very much worked out

1

My solution turned out like this, see if it helps you.

<html>

<head>
    <h1>Tabela</h1>
</head>

<body>
</body>

<script>
    class Pessoa {
        constructor(id, nome, idade) {
            this.id = id;
            this.nome = nome;
            this.idade = idade;
        }
    }

    var dados =
        [
            new Pessoa(1, 'João Silva', 14),
            new Pessoa(2, 'Maria Antonieta', 57)
        ];

    var table = document.createElement('table');
    table.style = 'border-style:inset;';
    adicionarCabecalho(table, '');
    adicionarCabecalho(table, 'ID');
    adicionarCabecalho(table, 'NOME');
    adicionarCabecalho(table, 'IDADE');

    dados.forEach(function (item, index) {
        let pessoa = item;
        linha = document.createElement('tr');
        table.appendChild(linha);
        preencherColunas(table, pessoa);

    });

    document.body.appendChild(table);


    /**
    * Preenche as colunas com os dados (BOTÃO, ID, NOME e IDADE)
    **/
    function preencherColunas(table, pessoa) {
        let colunaComBotao = document.createElement('td');
        colunaComBotao.appendChild(criarBotao(pessoa));
        adicionarColuna(table, colunaComBotao);

        let spanID = document.createElement("span");
        spanID.textContent = pessoa.id;
        adicionarColuna(table, spanID);

        let spanNome = document.createElement("span");
        spanNome.textContent = pessoa.nome;
        adicionarColuna(table, spanNome);

        let spanIdade = document.createElement("span");
        spanIdade.textContent = pessoa.idade;
        adicionarColuna(table, spanIdade);
    }

    /**
     * Cria o botão com o ID da pessoa    
     **/
    function criarBotao(pessoa) {
        let botao = document.createElement('button');
        botao.id = 'botao' + pessoa.id;
        botao.name = botao.id
        botao.textContent = pessoa.id;
        botao.onclick = () => alert('O id é: ' + pessoa.id);
        return botao;
    }

    /**
     * Adiciona uma nova coluna na tabela, recebendo o conteudo como parametro(span,button ... )
     **/
    function adicionarColuna(table, conteudo) {
        let coluna = document.createElement('td');
        coluna.appendChild(conteudo);
        table.appendChild(coluna);
    }
    /**
     * Adiciona um novo cabeçalho(th) na tabela, recebendo o titulo como parametro(ID,NOME,IDADE ...)
     **/
    function adicionarCabecalho(table, titulo) {
        var cabecalho = document.createElement('th');
        cabecalho.textContent = titulo;
        table.appendChild(cabecalho);

    }

</script>
</html>

Browser other questions tagged javascript table

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