JQuery - テーブルの内容を更新する

Question

私のページには、検索入力フィールドとテーブルがあります。

ユーザーが検索すると、入力はAJAX経由でバックエンドページに送信され、結果が返されます。それはうまくいきます。

私がしようとしているのは、フォームを空にしてから、返された結果が入力されることです。

私のようにフォームを作成しました：私は出力と呼ばれるDIVを追加しましたフォーム内

<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> 

、私は今それに表示する私の返された結果を取得しようとしています。

検索が行われた場合、返された結果は、次の形式である：

<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> 

私が使用して出力DIVを移入するためのjQueryを使用しています：

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

これは返されることになります表の上と下にデータが表示されます。

しかし、私は手動でテーブルに同じデータを追加した場合、私はAを作成した場合、レイアウトは素晴らしい..ですここで見られるように：https://jsfiddle.net/Lz49fe6x/1/

私が間違って何をしているのですか？ 返された結果がテーブルに正しく表示されるようにするにはどうすればよいですか？

おかげ

Answer 1

divタグがテーブルの内側に配置することができない、あなたはTBODYの代わりに、divのために切り替える必要があります。

<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> 

次のコードを使用してこのtbodyに行を追加します。あなたのdiv要素が構文的に正しい場所に配置されていないhttps://jsfiddle.net/Lz49fe6x/2/

Answer 2

で

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

ビュー更新フィドル。あなたはテーブル内でdivを持つことができます。 div inside table。しかし、あなたが欠けているものはtbodyです。したがって、あなたのdivをtbodyに入れて、以下のようにHTMLを変更してからもう一度やり直してください。

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

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