Как использовать метод JQuery .append() для добавления строки, содержащей html?

Я создал html-страницу с формой поиска и хочу показывать таблицу с некоторыми данными всякий раз, когда пользователь нажимает кнопку «Поиск».

Я хочу использовать JQuery для отображения таких данных вместо вставки статического HTML <tr>. Я хочу использовать метод .append(), чтобы добавить строку, содержащую <td> с данными.

Поэтому я сделал следующее:

Я скопировал загрузочный код для таблицы и очистил <tbody>, поэтому в таблице не будет отображаться ни одна строка, если результаты не будут возвращены.

Я дал идентификатор <tbody>

Это html-код:

<table id="tabella" class="table hide">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">Indirizzo</th>
    </tr>
  </thead>
  <tbody id="tbody">
<!-- 

    <tr>
      <th scope="row">1</th>
      <td>Maria</td>
      <td>Ottone</td>
    </tr>


    <tr>
      <th scope="row">2</th>
      <td>Giacomo</td>
      <td>Troisi</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lorenza</td>
      <td>Pieri</td>
    </tr>

 <-->

  </tbody>
</table>

Теперь мне нужно добавить первый <tr> таблицы (ранее удаленный) к <tbody> с помощью метода JQuery .append(), как если бы это была строка, путем выбора идентификатора <tbody>.

function validateNome(){
  console.log('function validateNome has been activated');

  if ($("#inlineFormInputNome").val()=="") {
      $("#errorLog").show();    
  } else {          
    $("#errorLog").hide();    
    $("#cercaNome").prop("disabled", true);     
    setTimeout(function (){              
      $("#tabella").show();    

//Что я должен написать в скобках в следующей строке?

      $("#tbody").append("        ");

       $("#cercaNome").prop("disabled", false);    
    } , 2000);
  }
}

То есть: возможно ли объединить метод append() с методом html() в JQuery? Или: Как я могу использовать метод JQuery .append() для добавления строки, содержащей html код?

К вашему сведению, вы получите более точные ответы быстрее, если покажете нам фактический код, а не описываете его.

Rory McCrossan 22.05.2019 15:37

Вы можете проверить этот пост, если он хоть как-то поможет: stackoverflow.com/questions/3015335/jquery-html-vs-append

Lou dv 22.05.2019 15:39

@addo.lou спасибо за предложение. Допустим, я пытаюсь «заполнить этот метод html() внутри метода append()».

franz1 22.05.2019 15:49
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
3
27
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете попробовать что-то вроде этого:

 $("#tabella tbody").append('<tr><th scope="row">2</th><td>Giacomo</td><td>Troisi</td>/tr>');

Он будет добавлен <tr> после последнего <tr> в таблице.

Спасибо! Я пытался сделать это раньше, но оставил пробелы в коде; теперь, глядя на ваш фрагмент, я удалил пробелы между тегами, и это работает!

franz1 22.05.2019 16:04

Пожалуйста! Я также оставляю вам этот другой пост, может пригодиться в другой раз: stackoverflow.com/questions/36974058/…

Lou dv 22.05.2019 16:08

Другие вопросы по теме