JQuery - Обновление содержимого таблицы

Question

На моей странице у меня есть поле ввода для поиска и таблица.

По мере того как пользователь ищет вход, отправляется через AJAX на бэкэнд-страницу, которая возвращает результаты. Это прекрасно работает.

То, что я пытаюсь сделать, заключается в том, что форма пуста пуста, а затем заполняется возвращаемыми результатами.

Я создал форму, как:

<div class="input-div">Search 
     <input type="text" id="txt_search"> 
    </div> 

    <div class='tableOne'><br/> 
    <table> 
     <thead> 
     <th colspan="4" align="center">RESULTS</th> 
     <tr class="res"><td colspan="4" align="center">Matches:</td></tr> 
     <tr> 
      <th align="center">COL1</th> 
      <th align="center">COL2</th> 
      <th align="center">COL3</th> 
      <th align="center">COL4</th> 
     </tr> 
     </thead> 

     <!-- results --> 
     <div id="output"> 

     </div> 
     <!-- results --> 

    </table> 
    </div> 

внутри формы я добавил DIV называемый выход, я сейчас пытаюсь получить мои возвращаемые результаты, чтобы отобразить в этом.

Когда поиск будет сделано, результаты возвращаются в следующем формате:

<tr> 
    <td>1a</td> 
    <td>1b</td> 
    <td>1c</td> 
    <td>1d</td> 
    </tr> 

    <tr> 
    <td>2a</td> 
    <td>2b</td> 
    <td>2c</td> 
    <td>2d</td> 
    </tr> 

Я использую JQuery для заполнения выходного DIV с помощью:

  $('#output').html(data) 

Это приводит к возвращаемым данные, появляющиеся выше и вне таблицы.

Но если я создаю, если я вручную добавить одни и те же данные в таблице, расположение прекрасно .. как можно видеть здесь: https://jsfiddle.net/Lz49fe6x/1/

Что я делаю неправильно? Как получить, чтобы мои возвращенные результаты отображались правильно в таблице?

Благодаря

Answer 1

DIV тег не могут быть помещены в таблицу, вы должны переключиться на TBODY вместо дел.

<div class="input-div">Search 
    <input type="text" id="txt_search"> 
</div> 

<div class='tableOne'><br/> 
<table> 
    <thead> 
    <th colspan="4" align="center">RESULTS</th> 
    <tr class="res"><td colspan="4" align="center">Matches:</td></tr> 
    <tr> 
     <th align="center">COL1</th> 
     <th align="center">COL2</th> 
     <th align="center">COL3</th> 
     <th align="center">COL4</th> 
    </tr> 
    </thead> 

    <!-- results --> 
    <tbody id="output"> 

    </tbody> 
    <!-- results --> 

</table> 
</div> 

Теперь добавьте свои строки в этот тём, используя следующий код.

$('#output').html(data) 

Просмотр скрипка обновления на https://jsfiddle.net/Lz49fe6x/2/

Answer 2

Вашего DIV не помещаются в синтаксический правильном месте. Вы можете иметь div внутри таблицы. div inside table. Но то, что вам не хватает, это твой. Поэтому положите свой div в tbody и измените свой html как показано ниже и попробуйте еще раз

<table> 
     <thead> 
     .............. 
     </thead> 
     <tbody> 
      <!-- results --> 
      <div id="output"> 

      </div> 
      <!-- results --> 
     <tbody> 
</table>