each of jquery does not find "TR" dynamically added table

Question

each of jquery does not find "TR" dynamically added table

Navigation

#1 by (0 votes)

1

Hello, I have a table where the first TR of it is fixed containing some inputs to search

Assunto | Data   | Categoria
input1  | input2 | input3
item1   | item 1 | item 1

Where this item 1 is dynamically added according to the input search result, my current code:

$(document).on("keyup", "input", function(){
    var tipo = $(this).attr("name");
    var text = $(this).val();
    var obj = {}
    obj[tipo] = text;
    $.ajax({
        url: "minhaurl",
        data: obj,
        type: "POST",
        success: function(result){
            $('table > tbody > tr').not('#resident').each(function() {
                $(this).remove();
            });

            $("#meusLec").append(result);
        }
    });
});

It works correctly, but only in the first search, the second where items are added dynamically, jquery does not run through each and does not empty the table with the new results

html jquery

asked by anonymous 07.07.2017 / 04:40

1 answer

Sign json parameters with digital certificate C # When I roll my listView I lose the checked checkboxes

score 0 · Answer 1

I think I understand what you need to do. The idea is a column finder on the table. If you are wrong correct me.

To do this, the <input/> fields will be in <thead> , not <tbody> . Another thing. There is no need to make a new request to popular the table with every keyup of the user. Unless processing is server-side . Anyway, come on:

The working example has here

This is the Structure HTML :

<table id="example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
    </tr>
    <tr id="tr-search">
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
    </tr>
  </tfoot>
  <tbody>
    <tr class="row">
      <td class="name">Tiger Nixon</td>
      <td class="position">System Architect</td>
      <td class="office">Edinburgh</td>
    </tr>
    <tr class="row">
      <td class="name">Garrett Winters</td>
      <td class="position">Accountant</td>
      <td class="office">Tokyo</td>
    </tr>
    <tr class="row">
      <td class="name">Ashton Cox</td>
      <td class="position">Junior Technical Author</td>
      <td class="office">San Francisco</td>
    </tr>
    <tr class="row">
      <td class="name">Cedric Kelly</td>
      <td class="position">Senior Javascript Developer</td>
      <td class="office">Edinburgh</td>
    </tr>
  </tbody>
</table>

Structure CSS

.remove {
  display: none;
}

Structure JavaScript

$('#example thead th').each( function () {
  var title = $(this).text();
  $('#tr-search').append( '<td><input type="text" class="inputs-search" name="'+title.toLowerCase()+'" placeholder="Looking for '+title.toLowerCase()+'"/></td>');
});

$('.inputs-search').on('keyup', function(){
    var search = $(this).val();
    var column = $(this).attr("name");
  var target = '.row .' + column;
  var match = new RegExp(search, "i"); 

  $(target).each(function(){
        if (!match.test($(this).text())) {
        $(this).closest('tr').addClass('remove');
      } else {
        $(this).closest('tr').removeClass('remove');
      }
  });
});

To work, simply populate the bank table as you are doing it. One tip, all that was developed in the nail could have been easily developed using the plugin of JQuery datatables . That by chance, they already have this functionality ready.

I've made this example to illustrate here . Any questions, just comment.