Как удалить строки из таблицы, сгенерированной из ответа JQuery AJAX? - PullRequest
Новая
       13

Как удалить строки из таблицы, сгенерированной из ответа JQuery AJAX?

0 голосов
/ 06 июня 2018

Я пишу фрагмент кода, где:

  1. пользователь вводит местоположение,
  2. нажимает кнопку, чтобы выполнить вызов GET для извлечения данных на основе местоположения, и
  3. таблица заполняется данными.

Каждый раз, когда пользователь нажимает кнопку, я хочу обновить содержимое таблицы, но сейчас она продолжает добавляться.Я хотел написать метод clearTable(), но я пробовал .remove(), .parentNode.remove(table), tr:gt(0).remove() и т. Д. ... Безуспешно.

console.log() показывает, что таблица имеет только одну строку (заголовок) на момент очистки.Я не включил свой код clearTable(), так как я пробовал много вещей, и ничего из этого не сработало, но я показал, где я пытался его вызвать.

Кроме того, не уверен, что связан илинет, но хотя мой вызов GET завершается без проблем, консоль разработчика моего браузера показывает

Произошла ошибка при попытке загрузить ресурс

Код моей таблицы в HTMLтело: 

<div class=ui-grid-b">
   <table id="locTable">
       <tr>
           <th>Name</th>
           <th>ID</th>
           <th>Description</th>
       </tr>
   </table>
</div>

Javascript: 

$('#loadData').click(function (e) {
    if (getLocationInput() == '') {
        alert("Please enter a location.");
    }
    else {
        // clearTable(); <-- Currently not working
        var locData;
        $.ajax({
            'type': 'GET',
            'url': href,
            'contentType': 'application/json',
            'dataType': 'json',
            headers: { 'Authorization': "Bearer " + getAccessToken() },
            async: false,
            success: function(data) {
                locData = data;
            },
            error: function (xhr, ajaxOptions, thrownError) {
                handleAjaxError(xhr, thrownError);
            }
        });

        // Appends table with values from data
        $(function() {
            $.each(locData.data, function(i, loc) {
                $('<tr>').append(
                $('<td>').text(loc.name),
                $('<td>').text(location.id),
                $('<td>').text(loc.description)).appendTo('#locTable');
            });
        });
    }
});

1 Ответ

0 голосов
/ 06 июня 2018

Вы должны быть осторожны с использованием locData, поскольку ему присваивается значение асинхронно.То, как вы используете его сейчас, скорее всего, не совсем правильно.Тем не менее, для вашего clearTable() Я думаю, что вы могли бы найти это полезным. 

$("#locTable tr:not(:first-child)").remove();

Вот демо: 

console.log("About to remove childen");

setTimeout(function(){
  $("#locTable tr:not(:first-child)").remove();
  console.log("childen removed");
}, 2 * 1000)
<div class="ui-grid-b">
   <table id="locTable">
       <tr>
           <th>Name</th>
           <th>ID</th>
           <th>Description</th>
       </tr>
       <tr>
           <th>a name</th>
           <th>an ID</th>
           <th>some Description</th>
       </tr>
   </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...