none
Como adicionar uma coluna com CheckBox em uma tabela com JavasCript? RRS feed

  • Pergunta

  • Olá,
    Tenho uma página que possui uma tabela.
    Esta tabela possui várias colunas, linhas, etc.

    Preciso adicionar DINÂMICAMENTE uma coluna nesta tabela.
    Esta coluna terá um CheckBox e será a primeira coluna da tabela.

    Alguém já fez isso?

    Obrigado

    k2rto4-Pb - Analista SharePoint

    sexta-feira, 31 de agosto de 2012 20:51

Todas as Respostas

  • Aqui vai o código por "jquery":

    $("#id_da_minha_tabela tr").append("<td><input type='checkbox'  /></td>");

    Utilizei jquery para isso pq é mt mais simples, aliás, é mais simples para qualquer tipo de script.

    Descrição do código:

    $("") -> Quando tenho essa construção em jquery, significa algum seletor. Seletores servem para selecionar um elemento ou vários elementos de uma vez só. Você pode combinar os seletores e assim buscar qualquer elemento em seu dom. O que é feito no código acima:

    Seleciona-se a tabela pelo seu id (deve substituir onde tem "id_da_minha_tabela" pelo id de sua tabela de fato). A sintaxe de um seletor para seleciona-lo pelo id é "#" + ID_do_Elemento. Já no contexto de minha tabela, eu combino o seletor com mais um. Estou dizendo para o jquery selecionar todas as linhas (tr) de minha tabela.

    Outro exemplo de seletor:

    $("div").css("display", "none");

    Neste seletor, eu seleciono todas as divs presentes no meu html, e então eu dou um display:none para todas. Assim todas as divs de meu html sumirão automaticamente.

    Continuando:

    Já de posse das linhas de minha tabela, eu então dou um "append" (função para adicionar código html a alguma estrutura). E então adiciono por meio do append, uma coluna (td) com um checkbox dentro. Pronto a mágica tá feita, em 1 linha de código.

    Com javascript isso daria umas belas linhas de código.

    sábado, 1 de setembro de 2012 12:50
  • Olá Marcos,

    Muito boa a sua resposta.

    Eu consegui aqui adicionar a coluna a tabela e com um CheckBox dentro, que beleza.

    O problema é que não estou conseguindo adicionar para a 1º coluna.

    Com o meu código abaixo a coluna é adicionada a última posição.

    <!DOCTYPE html>
    <html>
    
    <head>
    
    </head>
    
    <body>
    
    <table border="1" id="ID">
      <tr>
        <th>Coluna Um</th>
        <th>Coluna Dois</th>
      </tr>
      <tr>
        <td>Valor Um</td>
        <td>Valor Dois</td>
      </tr>
      <tr>
        <td>Valor Um</td>
        <td>Valor Dois</td>
      </tr>
    </table>
    
    </body>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    
    $("#ID tr").append("<td><input type='checkbox'  /></td>");
    
    </SCRIPT>
    
    </html>

    Você consegue mudar a coluna para a primeira posição?

    E também teria como tirar o CheckBox do nome da coluna criada?

    Obrigado meu amigo.

    Abraços


    k2rto4-Pb - Analista SharePoint

    sábado, 1 de setembro de 2012 20:42
  • Para selecionar o primeiro elemento encontrado faça assim:

    $("#ID tr:first") // Aqui seleciona a primeira linha da tabela

    $("#ID tr:last") // Aqui seleciona a última linha da tabela

    Eu não entendi sua segunda dúvida...

    Abraço!

    segunda-feira, 3 de setembro de 2012 00:24
  • Olá Marcos,

    Fiz um teste aqui com $("#ID tr:first") e vejo que o checkbox é adicionado na primeira linha e na última coluna.

    O que preciso fazer é adicionar o checkbox na primeira coluna e não na última coluna.

    Como que posso fazer isso?

    Obrigado


    k2rto4-Pb - Analista SharePoint

    segunda-feira, 3 de setembro de 2012 02:31
  • humm

    Você está usando outra linha de código ou só essa?

    Era pra funcionar desse jeito...Pra agilizar você pode colocar um id na sua tr, e seleciona-la diretamente pelo id no jquery. Dessa forma evita que outra linha seja afetada.

    segunda-feira, 3 de setembro de 2012 12:05
  • Olá Marcos,
    Escrevi errado na resposta anterior.
    Com a seguinte linha de código $("#ID tr:first").append("<input type="checkbox" />") o checkbox é adicionado ao fim da primeira linha.

    Esta primeira linha é a linha com nomes da coluna.

    O que preciso mesmo fazer é que este checkbox seja adicionado como primeira coluna.
    Entendeu?

    Exemplo:

    A minha tabela tem três colunas.
    As colunas são:

    Coluna A Coluna B Coluna C

    Preciso que o checkbox seja adicionado antes da coluna A.
    Assim a minha tabela ficaria:

    Coluna CheckBox Coluna A Coluna B Coluna C

    Obrigado

    k2rto4-Pb - Analista SharePoint

    segunda-feira, 3 de setembro de 2012 12:26
  • Ok, vamos lá:

    Faça assim para selecionar apenas as linhas da tabela que são de dados (tbody) e não afetar o header (thead) da tabela.

    $("#ID tbody tr:first").append("<input type="checkbox" />");

    Agora pra resolver seu problema que é o de adicionar antes de todas as colunas, a coluna com o check:

    $("<td><input type="checkbox" /></td>").insertBefore("#ID tbody tr td:first"); // Adiciona checks as linhas de dados da tabela

    Fazendo isso você adiconará uma coluna antes de todas a tabela. Mas sua tabela ficará desformatada, já que não terá a

    coluna do header respectiva aos checks. Então adicione uma coluna também ao thead da tabela:

    $("<th></th>").insertBefore("#ID thead tr:first");

    Lembrando que para isso, sua tabela deve tá formatada assim:

    <table>

    <thead>

    // Cabeçalho

    </thead>

    <tbody>

    // Dados

    </tbody>

    </table>

    segunda-feira, 3 de setembro de 2012 12:56
  • Olá,

    Eu adicionei as linhas na minha página e não deu muito certo.

    Basta adicionar uma linha após a outra ou tem que fazer algum foreach?

    Obrigado


    k2rto4-Pb - Analista SharePoint

    segunda-feira, 3 de setembro de 2012 15:32
  • posta o seu código html e javascript que está utilizando
    segunda-feira, 3 de setembro de 2012 20:01
  • Olá,

    Estou utilizando o html de teste ja publicado anteriormente.

    Segue o mesmo.

    <!DOCTYPE html>
    <html>
    
    <head>
    
    </head>
    
    <body>
    
    <table border="1" id="ID">
      <tr>
        <th>Coluna Um</th>
        <th>Coluna Dois</th>
      </tr>
      <tr>
        <td>Valor Um</td>
        <td>Valor Dois</td>
      </tr>
      <tr>
        <td>Valor Um</td>
        <td>Valor Dois</td>
      </tr>
    </table>
    
    </body>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    
    $("#ID tbody tr:first").append("<input type='checkbox' />");
    $("<td><input type='checkbox' /></td>").insertBefore("#ID tbody tr td:first");
    $("<th></th>").insertBefore("#ID thead tr:first");
    
    </SCRIPT>
    
    </html>

    Abraços

    k2rto4-Pb - Analista SharePoint

    segunda-feira, 3 de setembro de 2012 20:19
  • e o que está acontecendo com esse código?

    O seu objetivo é qual?

    no código que você postou, elimine a primeira e última linha, coloque só essa:

    $("<td><input type='checkbox' /></td>").insertBefore("#ID tbody tr td:first");

    segunda-feira, 3 de setembro de 2012 20:49
  • Olá,

    Agora quase funcionou.

    O que quero é que todos as linhas da minhas tabela, tirando o nome das colunas, tenham um checkbox como primeira coluna.

    Com o código que voce passou agora o checkbox é adicionado na primeira coluna da linha dois.

    Preciso que todas as linhas tenham este checkbox e que no nome desta coluna que contem os checkbox não tenha nome alguém.

    Muito Obrigado Marcos


    k2rto4-Pb - Analista SharePoint

    segunda-feira, 3 de setembro de 2012 21:10