on page have search input field , table.
as user searches input sent via ajax backend page returns results. working fine.
what i'm trying have form start empty , populated returned results.
i've created form :
<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> within form i've added div called output, i'm trying returned results display in that.
when search done, results returned in following format :
<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> i'm using jquery populate output div using :
$('#output').html(data) this results in returned data appearing above , outside of table.
yet if create if manually add same data table, layout fine.. can seen here : https://jsfiddle.net/lz49fe6x/1/
what doing wrong ? how returned results appear correctly in table ?
thanks
div tag cannot placed inside table, have switch tbody instead of 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> now append rows in tbody using following code.
$('#output').html(data) view update fiddle @ https://jsfiddle.net/lz49fe6x/2/
Comments
Post a Comment