Как отфильтровать элементы ответа html ajax перед вставкой в ​​документ?

Question

Я работаю с сервером, который отвечает HTML ответом в форме:

<div>
<table>
  <thead>
    <tr>
    <th>Name</th>
    <th>Country</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>James Doe</td>
      <td>Canada</td>
    </tr>
     <tr>
      <td>Jonas Doe</td>
      <td>UK</td>
    </tr>
  </tbody>
</table>
</div>

Моя проблема в том, что перед вставкой этой таблицы я хочу отфильтровать строки. Например, предположим, что я хотел, чтобы во второй ячейке были только строки с США в качестве значения.

Как я могу это сделать?

Вот мой текущий статус попытки решить эту проблему .

https://jsfiddle.net/bmp6a4gh/

По сути, я пытаюсь создать функцию, которая принимает строку html и вводит строку (того же формата), но с отфильтрованные строки.

function processResponse(html){
  var $html = $(html);
  //perform filtering here
  //I only want elements from USA
  $html.filter(function(index, element){
    return true;
  });
  $("#response").html($html);
}

Answer 1

Вы можете сначала скрыть все trs, которые находятся внутри tbody, а затем использовать filter, чтобы показать только те строки, которые имеют данные, например: USA.

Демо-код :

var simulatedResponse =
  "<div><table><thead><tr><th>Name</th><th>Country</th></tr></thead><tbody> <tr><td>John Doe</td><td>USA</td> </tr><tr><td>James Doe</td><td>Canada</td></tr><tr><td>Jonas Doe</td><td>UK</td></tr><tr><td>Jonas Doe</td><td>UK</td> </tr> </tbody></table></div>"

function processResponse(html) {
  var $html = $(html);
  //hide all trs inside tbody
  $html.find("tbody  tr ").hide();
  //filter trs
  $html.find("tbody  > tr  td").filter(function() {
  //check if value in td is Usa
    return $(this).text().indexOf("USA") == 0;
  }).parent().show();//show that tr
  $("#response").html($html);
}

// handle click and add class
var button = $("button");
button.on("click", () => {
  $("#response").html("");

  /* $.ajax({
       method: "post",
       url: "/echo/html/",
       data: simulatedResponse
     })
     .done(processResponse);*/
     //call function
  processResponse(simulatedResponse);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Perform Search</button>
<div id="response"></div>

Answer 2

Вы должны сначала найти позицию td, а затем удалить элементы за пределами позиции, например:

const index = $html.find("td:contains(USA)").eq(0).closest("tr").index() + 1;
$html.find("tr").not(":eq("+index+")").remove()

Примечание: этот код находит только первую строку данных и не поддерживает для нескольких данных с одинаковым названием страны