Subsetting the row of the PivotTable

Question

Subsetting the row of the PivotTable

Navigation

#1 by (2 votes)

2

In the pick line function I get the line clicked and send the data to the form and store OBJ of the line and get index tbm

var index = $(obj).closest('tr').find('td').eq('0').text();

Here after I changed the data I create the tr and step the data to table, but it goes to the end I wanted to replace the line I had clicked on, to breaking head and not finding solution

 var tr =
    '<tr class="classeDaLinha">' +
    '<td class="id" id="id"  >' + id + '</td>' +
    '<td class="name">' + name + '</td>' +
    '<td class="qtde" >' +
    '<input style="width:50px;" type="number" name="quant[' + id + ']" id="quant[' + id + ']" class="p_quant" value="' + qtde + '"  onkeyup="updateSubtotal(this)" onchange="updateSubtotal(this)" data-price="' + price + '" />' +
    '</td>' +
    '<td class="num_modulos"> ' + num_modulos + '</td>' +
    '<td class="obs_item"> ' + obs_item + '</td>' +
    '<td class="price"> ' + price + '</td>' +
    '<td class="subtotal">' + subtotal + '</td>' +
    '<td><img src="' + BASE_URL + '/assets/images/delete.png" width="20" height="20" title="Delete" onclick="excluirProd(this)"/>\n\
            <img src="' + BASE_URL + '/assets/images/edit.png" width="20" height="20" title="Editar" onclick="pegar_valor_linha_tabela_editar(this)"/></td>' +
    '</tr>';
$('#products_table tbody').append(tr);

jquery objetos table

asked by anonymous 31.10.2017 / 14:02

1 answer

Error adding composer (Class not found) Working with trtd to optimize JQuery

score 2 · Accepted Answer

With remove and after

One way to do what you want is to remove the old one and add the new one instead. The removal is done with the remove() function, and after that has to be added with the after function to ensure that the new <tr> is next to <tr> previous, as opposed to the append function that adds it as the last child.

Example of building your click function to remove:

$(".edit").click(function(){
    const tdRemover = $(this).closest("tr"); //obter o tr acima

    trRemover.prev().after(tr); //colocar o novo tr antes deste
    trRemover.remove(); //remover este tr
});

Naturally this implies defining the class delete in the image that serves as a click:

... 
'<td><img class="delete" src="' + BASE_URL + '/assets/images/delete.png" width="20" height="20" title="Delete"/>....
<!--     ---------^class delete aqui, e sem o atributo onclick-->
n\<img class="edit" src="' + BASE_URL + '/assets/images/edit.png" width="20" height="20" title="Editar"/>
<!--     ------^class edit aqui, e sem o atributo onclick-->

With replaceWith

Another simple solution is to directly use the replaceWith function of Jquery that replaces the selected element directly with the html received as a parameter:

$(".edit").click(function(){
    $(this).closest("tr").replaceWith(tr); //substituição direta
});

With html

A third solution is to replace the html of <tr> all with the new one. This implies modifying the new html to not include the actual <tr> :

var tr =
    //sem o '<tr>' aqui no inicio 
    '<td class="id" id="id"  >' + id + '</td>' +
    '<td class="name">' + name + '</td>' +
    ...; //sem o '</tr>'; no fim

And the click function would be:

$(".edit").click(function(){
    $(this).closest("tr").html(tr); //colocar o html como conteudo
});

Documentation for the after function and for replaceWith