How do I insert a new row between two other rows of a table with jquery?

Question

How do I insert a new row between two other rows of a table with jquery?

Asked 5 years, 4 months ago

Viewed 48 times

0

Good morning! I have a page with a table, which is generated by the database. I need to insert a new row through a button, however, I’m having difficulty inserting this new row enters two other rows of the table.See the HTML code below to better understand:

<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" />
</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 class="dynamicRows">
<td class="pedido">3791</td>
<td>FITA DUPLA FACE PARA ESPELHO RETROVISOR</td>
<td>3M DO 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 onclick="AddTableRow()" type="button">+</button>
</td>
</tr>
<tr class="dynamicRows">
<td class="pedido">3792</td>
<td>INTERRUPTOR LUZ DE RE</td>
<td>3-RHO INTERRUPTORES 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 onclick="AddTableRow()" type="button">+</button>
</td>
</tr>
</tbody>
</table>
<br><center><input type="button" class="Cenviar" value="Enviar" name="" id="00000186"/></center><br>
<div class="resultado"></div>
<br><center><b><font size="4" color="#FF0000">16/01/2018 09:50:09</font></b></center><br>
</body>
</html>

Java code:

(function($) {  
    AddTableRow = function() {
    var newRow = $("<tr>");
    var cols = "";
    cols += '<td><input type="text"  size="34"/></td>';
    cols += '<td><input type="text"  size="34"/></td>';
    cols += '<td><input type="text"  class="valor"/></td>';
    cols += '<td><input type="text"  class="valor"/></td>';
    cols += '<td><input type="text"  class="valor"/></td>';
    cols += '<td>';
    cols += '<button onclick="RemoveTableRow(this)" type="button">-</button>';
    cols += '</td>';
    $(newRow).append(cols);
    $("#dados").append(newRow);
    return false;
    };
})(jQuery);

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

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

    return false;     
    }   
})(jQuery);

As it is, the row is inserted at the end of the table, I need it to be inserted between two lines.

1 answer

Browser other questions tagged javascript jquery html5 ajax json

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

by Ricardo Pontual • **21,129** points · Answer 1 · 2019-07-21T15:40:14+00:00

To insert right after the line where you clicked on the "+" button, you need to use this line as a reference and use insertAfter, or insertBefore if you wanted to before:

(function($) {  
    AddTableRow = function(btn) {
    var newRow = $("<tr>");
    var cols = "";
    cols += '<td><input type="text"  size="34"/></td>';
    cols += '<td><input type="text"  size="34"/></td>';
    cols += '<td><input type="text"  class="valor"/></td>';
    cols += '<td><input type="text"  class="valor"/></td>';
    cols += '<td><input type="text"  class="valor"/></td>';
    cols += '<td>';
    cols += '<button onclick="RemoveTableRow(this)" type="button">-</button>';
    cols += '</td>';
    $(newRow).append(cols);
    
    $(newRow).insertAfter($(btn).closest('tr'));
    
    //$("#dados").append(newRow);
    return false;
    };
})(jQuery);

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

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

    return false;     
    }   
})(jQuery);

table {
  background-color: #aaa
}

table td {
  background-color: #fff
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 class="dynamicRows">
         <td class="pedido">3791</td>
         <td>FITA DUPLA FACE PARA ESPELHO RETROVISOR</td>
         <td>3M DO 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 onclick="AddTableRow(this)" type="button">+</button>
         </td>
      </tr>
      <tr class="dynamicRows">
         <td class="pedido">3792</td>
         <td>INTERRUPTOR LUZ DE RE</td>
         <td>3-RHO INTERRUPTORES 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 onclick="AddTableRow(this)" type="button">+</button>
         </td>
      </tr>
   </tbody>
</table>

Note that to be very clear where you will include, I passed the button as reference: AddTableRow(this) and then, from the button, I picked up the nearest line: .closest('tr')