How to copy the contents of one <td> to another <td> in another table row?

Asked

Viewed 122 times

0

Hello, I have a question.I have a table in which each row has a button that inserts a new row just below, but I would like to upload some information from the line above to the newly created row, how can I do this?

HTML CODE

<!DOCTYPE HTML>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <script src="jquery.min.js"></script>
        <script src="json2.js"></script>
        <script src="jquery.alphanumeric.pack.js"></script>
        <script src="java.js"></script>
        <link rel="stylesheet" type="text/css" href="folha.css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
              crossorigin="anonymous">
    </head>
    <body>
        <center><b><font size="5">AUTO PECAS TATETUBA LTDA - EPP</font></b></center>
        <center><b><font size="4" color="#FF0000">PEDIDO DE COTAÇÃO</font></b></center><br>
        <table id="dados">
            <thead>
                <tr>
                    <th id="td_titulo"></th>
                    <th>Descrição</th>
                    <th>Fabricante</th>
                    <th>Cód. Fabricante</th>
                    <th>Quantidade</th>
                    <th>Valor Unitário</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="pedido">3791</td>
                    <td>FITA DUPLA FACE PARA ESPELHO RETROVISOR</td>
                    <td>BRASIL LTDA</td>
                    <td>476</td>
                    <td>1</td>
                    <td><input type="text" name="11273" class="valor"/></td>
                    <td colspan="5" style="text-align: center;">
                        <button class="add" onclick="AddTableRow(this)" type="button" 
                                data-toggle="tooltip" 
                                data-placement="top" 
                                title="Adicione uma nova peça similar">+
                        </button>
                    </td>
                </tr>
                <tr>
                <td class="pedido">3792</td>
                <td>INTERRUPTOR LUZ DE RE</td>
                <td>AUTOMOTIVOS LTDA</td>
                <td>4489</td>
                <td>1</td>
                <td><input type="text" name="493" class="valor"/></td>
                <td colspan="5" style="text-align: center;">
                    <button class="add" onclick="AddTableRow(this)" type="button" 
                            data-toggle="tooltip" 
                            data-placement="top" 
                            title="Adicione uma nova peça similar">+
                    </button>
                </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

I would like to load only the contents of the "td" description and "td" quantity, which are respectively column 2 and 5.

JAVA CODE, responsible for inserting and removing lines.

(function($) {  
    AddTableRow = function(btn) {
    var newRow = $("<tr>");
    var cols = "";
    cols += '<td class="descricao">&nbsp;</td>';
    cols += '<td><input type="text" class="fab"/></td>';
    cols += '<td><input type="text"  class="valor"/></td>';
    cols += '<td class="quantidade">&nbsp;</td>';
    cols += '<td><input type="text"  class="valor"/></td>';
    cols += '<td>';
    cols += '<button class="remover" onclick="RemoveTableRow(this)" type="button">-</button>';
    cols += '</td>';

    $(newRow).append(cols);

    $(newRow).insertAfter($(btn).closest('tr'));

    return false;
    };
})(jQuery);

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

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

    return false;     
    }   
})(jQuery);
php javascript html jquery ajax

  • Where do you want to copy the information in the new line? In inputs?

1 answer

0


If you want to copy the information to the new line in the classes .descricao and .quantidade, just enter the code below before the return false; of function AddTableRow:

// pega o texto da 2ª coluna
var desc = $(btn).closest("tr").find("td:eq(1)").text().trim();
// pega o texto da 5ª coluna
var qtde = $(btn).closest("tr").find("td:eq(4)").text().trim();

$(btn) // botão clicado
.closest("tr") // linha pai
.next() // próxima linha
.find(".descricao") // busca pela classe
.text(desc) // adiciona o texto
.end() // volta para o .next()
.find(".quantidade") // busca pela classe
.text(qtde); // adiciona o texto

  • Sam, wouldn’t it be nice to use the same find per class (.find(".descricao") ) in place of the positional find("td:eq(1)")? if the order of the columns changes will continue working :)

  • Ricardo, you can’t because TD’s don’t have class, so you have to take the position.

  • yes that I understood, I was saying to suggest that you put the classes in the table that is already generated, as it is in the new lines, because it is kind of strange to generate the table in a way and then make append of new lines with different structure ;) would be more a suggested improvement

  • Thank you very much for your attention, it worked perfectly.

Browser other questions tagged php javascript html jquery ajax

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