Take data from a selected row of a dynamic table

Asked

Viewed 860 times

1

I have a table, which I enclose the data dynamically in a table. I include in this way, I include in the first column the checkbox:

$("#tablepesquisaprodutos").append("<tr class='item'>"
                    + "<td>" + "<input type='checkbox' class='link-check' />" + "</td>"
                    + "<td>" + CodigoProduto + "</td>"
                    + "<td>" + DescricaoProduto + "</td>"
                    + "</tr>")

It works perfectly, but I need that when checking the checkbox, I can delete or edit the line (opening a modal with the line data), how can I do? Delete I can by a button, I do it that way:

  $(function () {
    $(document).on('click', '.link-excluir', function (e) {
        e.preventDefault(); // isso aqui impede do '#' fazer o link pular
        var $el = $(this);
        $el.closest("tr").fadeOut(500, function () {
            $el.remove();
        })
    })
})

Only in case I have the link to delete on the line, I need to select the line, and then click the action button, or delete or change.

javascript jquery

  • $(".link-check").change(); is not good for you? Inside just check if it is checked or not and make appear/ disappear

  • 1

    If you want to open a fashion, there are several examples here on the site, like this: how to open jquery modal, or that: edit fields in modal. Now an easier way and make the TD editable, just change your code to + "<td contenteditable='true'>" + and it will be possible to edit the direct value in TD, what you think?

  • @Máttheusspoo I wanted that when selecting it click on the button or to change or to delete, I think that with the change would not work.

  • @Ricardopunctual the idea is good, however I need q it select to then click the delete or change button

  • In this case, you can add the attribute contenteditable='true' by clicking the change button or checking the checkbox, and the event blur of TD remove the attribute :)

  • @Ricardopunctual but I didn’t understand how to do it. I will select the checkbox of the row I want to delete or change, how can I take the value of this row, and when clicking the delete button, and the change button, open the modal with the data.

  • But you want to edit directly in the table as I suggested or you want to open the modal?

  • I want to edit by opening the modal. I already do this with a link in each row, but instead of having the link, I want to have the checkbox, select, and then yes, I click a button from outside the table to perform desired action

  • @Ricardopunctual I managed to delete, now as I can by clicking on the checkbox, and clicking on the edit button, open the modal with table information ?

Show 4 more comments

1 answer

0


I managed to delete by throwing the line into a global variable in this way, and then by clicking the button, I run the delete function:

   $(function () {
    $(document).on('click', '.link-check', function (e) {
        $thatRow = $(this);
    })
})

And here the function that is on the button to delete the line.

    function ExcluirProdutoPedido(linha) {
    $thatRow.closest("tr").fadeOut(500, function () {
        $thatRow.remove();

    })

And here to take the values of the selected line and open the modal with the values:

 $("#idproduto").val($thatRow.closest('tr').find('td').eq(1).text());
    CarregaProduto($thatRow.closest('tr').find('td').eq(1).text());
    $("#qtd").val($thatRow.closest('tr').find('td').eq(3).text());
    $("#precocusto").val($thatRow.closest('tr').find('td').eq(4).text());
    $("#descontop").val($thatRow.closest('tr').find('td').eq(5).text());
    $("#descontov").val($thatRow.closest('tr').find('td').eq(6).text());
    $("#icms").val($thatRow.closest('tr').find('td').eq(8).text());
    $("#aliquotaicms").html($thatRow.closest('tr').find('td').eq(9).text());
    $("#ipi").val($thatRow.closest('tr').find('td').eq(13).text());
    $("#iss").val($thatRow.closest('tr').find('td').eq(11).text());
    $("#dataentrega").val($thatRow.closest('tr').find('td').eq(17).text());

    abreModalAdd();

Browser other questions tagged javascript jquery

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