Блог

Главная - Вопросы по программированию - Как воссоздать таблицу с помощью кнопки, используя HTML?

Как воссоздать таблицу с помощью кнопки, используя HTML?

#html #ajax

#HTML #аякс

Вопрос:

У меня есть два топа (топ3 и топ5 по количеству затяжек). Мне нужно создать таблицу с помощью кнопки из top3, если был выбран top3, и top5, если был выбран top5. Страницы /users/top3 и /users/top5 содержат таблицы с двумя вершинами и вызываются AJAX. С помощью этого кода я вижу, что таблицы выводятся при выборе top3 или top5, но таблицы не изменяются, если я повторно выбираю top3 или top5 и нажимаю еще раз. Как сделать их пригодными для повторного использования?

 <script>
  var created = false;
  function test() {
    var chosenOption = $("select").val();
    if (!created) {
      if (chosenOption == "3")
      {
        $.ajax('/users/top3',
        {
          dataType: 'html',
          timeout: 500,
          success: function(data) {
              $("table").attr("border","1px")
              $("table").attr("created",true)
              $(data).find('tr').appendTo("table")
          }
        });
      }
      else if (chosenOption == "5")
      {
        $.ajax('/users/top5',
        {
          dataType: 'html',
          timeout: 500,
          success: function(data) {
              $("table").attr("border","1px")
              $("table").attr("created",true)
              $(data).find('tr').appendTo("table")
          }
        });
    }
    created = true;
  }
  }
</script>
<p>Top:</p>
<button onclick="test();">Вывести</button>
<select>
  <option value="3">3</option>
  <option value="5">5</option>
</select>
<table>
</table>

Комментарии:

1. что делает data предоставление inside success fn для консоли и проверки. Также у вас есть условие, то есть: !created следующий раз created будет истинным, и оно не войдет внутрь if — это то, чего вы хотите?

2. Это не совсем то, что я хочу, но я также хочу предотвратить дублирование.

Ответ №1:

Удалите переменную created и if (!created) оператор, а затем поместите $("table").empty(); в первую строку test() , чтобы очистить таблицу перед добавлением содержимого.