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

Popular posts from this blog

c++ - QTextObjectInterface with Qml TextEdit (QQuickTextEdit) -

javascript - angular ng-required radio button not toggling required off in firefox 33, OK in chrome -

xcode - Swift Playground - Files are not readable -