jquery - How to display div next to table row? -
i have table displaying data query.
right when click on #emp_namefirst# shows me #emp_cell# display on bottom of table.
how can display div next table row click on #emp_namefirst#?
<script language="javascript"> $(document).ready(function() { $('a').click(function () { //var statename = $(this).prop("detail"); var statename = $(this).attr("detail"); $('#maintext').show(); $('#output').html(statename); }); }); </script> <table class="table table-hover table-bordered table-sieve" > <thead><th >name</th><th >department</th></thead> <tbody> <cfloop query="corporate" > <cfoutput> <tr> <td ><span style="cursor:default"><a id="showdata" detail="cell: #emp_cell# "> #emp_namefirst#</td> <td >#dept_name# </td> </tr> </cfoutput> </cfloop> </tbody> </table> <div id="output"></div>
i setup demonstration fiddle here: http://jsfiddle.net/43dmvvto/3/
i changed links have class "datalink" reference in jquery not every link triggered it.
for example, copied data rows, see in action.
$(document).ready(function() { $('a.datalink').click(function () { //var statename = $(this).prop("detail"); var statename = $(this).attr("detail"); $('#maintext').show(); $('#output').html(statename); $('#output').css('top',$(this).offset().top); $('#output').css('left',($(this).offset().left + parseint($("#mtable").css('width')))); $("#output").css('visibility','visible'); }); });
Comments
Post a Comment