Inserir linha em tabela, com conteúdo diferentes, usando Jquery

18/08/2017

0

Pessoal se tenho uma tabela em html e uma função adicionar linha em Jquery como posso realizar uma mudança de conteúdo, ou seja, cada vez que adicionar uma linha a linha adicionada apresentar outro conteúdo e assim sucessivamente.

<table id="imagem-table">
                                <tbody>
                                    <tr>
                                        <th>Produto</th>
                                        <th>Codigo</th>                                        
                                        <th>Remover</th>                                        
                                    </tr>
                                    <tr>
                                        <td>Teste Produto</td>
                                        <td>Codigo do produto</td>
                                        <td>
                                            <button onclick="RemoveTableRow(this)" type="button">Remover</button>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="3" style="text-align: left;">
                                            <button onclick="AddTableRow()" type="button">Adicionar Imagem </button>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>


função Jquery

(function ($) {

                            RemoveTableRow = function (handler) {
                                var tr = $(handler).closest('tr');

                                tr.fadeOut(400, function () {
                                    tr.remove();
                                });

                                return false;
                            };


                            AddTableRow = function () {

                                var newRow = $("<tr>");
                                var cols = "";                                  
                                 cols += '<td>Teste1</td>';
                                    cols += '<td>Teste1fdg</td>';

                                    cols += '<td class="actions">';
                                    cols += '<button class="btn btn-large btn-danger" onclick="RemoveTableRow(this)" type="button">Remover</button>';
                                    cols += '</td>';


                                    newRow.append(cols);

                                    $("#imagem-table").append(newRow);
                                




                                return false;
                            };


                        })(jQuery);

Erika Barrado

Erika Barrado

Responder

Posts

27/11/2019

Guilherme Barbosa

o RemoveTableRow parece não estar funcionando...

Uncaught TypeError: tr.fadeOut is not a function


Alguem poderia me ajudar?
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar