2

É possivel criar uma tabela dinamica com adição de linhas e colunas? Conforme a imagem, a situação é: - Inicia uma tabela com 3 colunas e uma linha; - Considerando que a primeira linha e a primeira coluna teria que ser editável(ser possível o usuario digitar nela); - Dentro das linhas vazias trariam radio button;

Agora vem a parte que eu não consigo achar uma solução: - Quando clica no botão + da horizontal vai adicionar mais uma coluna( no máximo 5 colunas); - Quando clica no botão + da vertical vai adicionar mais uma linha; - E precisam estar sempre batendo a coluna com as linhas, conforme o exemplo na imagem.

É possivel fazer uma tabela tão dinâmica assim? inserir a descrição da imagem aqui

3 Respostas 3

5

Você terá alguns desafios para resolver, como por exemplo identificar corretamente os "radio buttons" para cada pergunta, mas deixo um código para sugestão.

//Adiciona linhas
$(".add-row").click(function () {
    if ($('.row-title').val() == '') {
        alert('Digite o título da pergunta');
        return;
    }

    if ($("#pergunta tbody tr td").length) {
        //clona a última linha
        $tr = $("#pergunta tbody tr:last-child").clone(true);
        var index = $("#pergunta tbody tr").length;
        var name = 'rd[' + (index + 1) + ']';
        //altera o nome e a propriedade checked do input
        $tr.find('td').children('input').attr('name', name).prop('checked', false);
        //altera o texto da primeira célula com o valor do input
        $tr.children('td:first-child').text($('.row-title').val());
        //adiciona no corpo da tabela
        $("#pergunta tbody").append($tr);
    } else {
        $("#pergunta tbody tr").append('<td>' + $('.row-title').val() + '</td>');
    }

});
//Adiciona colunas
$(".add-col").click(function () {

    if ($("#pergunta tbody tr td").length) {

        if ($('.col-title').val() == '') {
            alert('Digite a resposta');
            return;
        }

        var qtdMax = 5;//quantidade máxima de colunas
        if ($("#pergunta thead tr th").length < qtdMax) {
            //adiciona nova coluna com o texto do input
            $("#pergunta thead tr").append('<th>' + $('.col-title').val() + '</th>');
            //percorre cada linha do corpo da tabela
            $("#pergunta tbody tr").each(function () {
                //verifica o nome dos inputs da linha correspondente
                var name = 'rd[' + ($(this).index() + 1) + ']';
                //adiciona o input na coluna
                $(this).append('<td><input type="radio" name="' + name + '"></td>');
            });
        }
    } else {
        alert('Adicione a primeira pergunta antes de adicionar respostas!');
    }


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="pergunta">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>

        </tr>
    </tbody>
</table>
<div>

</div>
<p>
    <input type="text" class="row-title" />
    <button type="button" class="add-row">
        + Pergunta
    </button>
</p>
<p>
    <input type="text" class="col-title" />
    <button type="button" class="add-col">
        + Resposta
    </button>

</p>

11
  • Não entendi o voto contra, seria importante o Feedback do pq negativar a resposta, assim talvez pudesse melhorá-la.
    – abfurlan
    Commented 14/06/2017 às 23:32
  • Desculpe não ter informado antes, só dei o ponto negativo pelo fato de não ter seguido o máximo de 5 colunas citado acima, e claro que esse ponto pode ser revertido. Commented 15/06/2017 às 0:37
  • 1
    @abfurlan muito obrigada pela sua ajuda!!!
    – Isa
    Commented 19/06/2017 às 14:04
  • 1
    @IsabellaMeirelles veja minha edição, acredito que agora ficou ok
    – abfurlan
    Commented 21/06/2017 às 13:24
  • 1
    @abfurlan resolveu sim!!! obrigada pela sua grande ajuda!!!
    – Isa
    Commented 21/06/2017 às 16:23
3

Primeira conselho que lhe dou, se realmente precisa de algo tão dinâmico, jQUery não é o caminho, tente o VueJS.

Abaixo segue um exemplo completo, veja que manipular a tabela nem é tão doloroso.

var app = new Vue({
  el: '#tabela',
  data: {
    respostas: [ 
      { texto: 'Sim' }, 
      { texto: 'Não' } 
    ],
    perguntas: [
      { 
        texto: 'Pergunta 1', 
        respostas: [ 
          { selecionado: false }, 
          { selecionado: false } 
        ] 
      }
    ]
  },
  methods: {
    addResposta: function (event) {
      var count = this.respostas.length + 1;
      if (count <= 5) {
        this.respostas.push({ texto: 'Resposta ' + count });
        this.perguntas.forEach(function (pergunta) {
          pergunta.respostas.push({ selecionado: false });
        })
      } else {
        alert('Não é possivel adicionar mais que 5 perguntas');
      }
    },
    delResposta: function (indice) {
      this.respostas.splice(indice, 1);
      this.perguntas.forEach(function (pergunta) {
        pergunta.respostas.splice(indice, 1);
      })
    },
    addPergunta: function (event) {
      var count = this.perguntas.length + 1;
      var respostas = this.respostas.map(function () {
        return { selecionado: false };
      })
      this.perguntas.push({ 
        texto: 'Pergunta ' + count,
        respostas: respostas
      });
    },
    delPergunta: function (indice) {
      this.perguntas.splice(indice, 1);
    }
  }
})
.resposta {
  white-space: nowrap;
}
.resposta input[type='text'] {
  width: 75px;
}

.pergunta {
  width: 150px;
}

.padrao {
  width: 75px;
}

input {
  box-sizing: border-box;
}

input[type='radio'] {
  text-align: center;
  width: 75px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<table id="tabela">
  <thead>
    <tr>
      <th></th>
      <th v-bind:colspan="respostas.length">Respostas</th>
      <th></th>
    </tr>
    <tr>
      <th>Perguntas</th>
      <th v-for="(resposta, indice) in respostas" class="resposta">
        <input type="text" class="resposta" v-model="resposta.texto" />
        <input type="button" value="X" v-on:click="delResposta(indice)" />
      </th>
      <th>
        <input type="button" class="padrao" value="Adicionar" v-on:click="addResposta" />
      </th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(pergunta, indice) in perguntas">
      <td>
        <input type="text" class="pergunta" v-model="pergunta.texto" />
      </td>
      <td v-for="resposta in pergunta.respostas">
        <input type="radio" v-bind:name="'resposta' + indice" class="resposta" v-model="resposta.selecionado" />
      </td>
      <td>
        <input type="button" class="padrao" value="Remover" v-on:click="delPergunta(indice)" />
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <input type="button" class="pergunta" value="Adicionar Pergunta" v-on:click="addPergunta" />
      </td>
      <th v-bind:colspan="respostas.length"></th>
      <td>
        <input type="button" class="padrao" value="Salvar" />
      </td>
    </tr>
  </tfoot>
</table>

1
  • nossa, esse exemplo está incrível, infelizmente ainda sou iniciante e não tive contato com vueJS, mas com certeza vou tentar entender esse exemplo e quem sabe conseguir aplicar. Obrigada!!!
    – Isa
    Commented 19/06/2017 às 13:11
2

function myFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "<input type='text' >";
}
<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

<button onclick="myFunction()">Try it</button>

Olá acredito que seja este o caminho para o que voce busca, um botão e sua tabela vai automaticamente pelo click do botão sendo mudada.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .