Jquery append div after certain table row

Question

I have a table defined:

<div id="display">
  <div class="displayRow">
    <img src="images/expand-arrow.gif" class="expandArrow" alt="expand">
    <div class="displayElement">1</div>
    <div class="displayElement">Standard</div>
    <div class="displayElement">This is more information</div>
  </div>
  <div class="displayRow">
    <img src="images/expand-arrow.gif" class="expandArrow" alt="expand">
    <div class="displayElement">2</div>
    <div class="displayElement">Special</div>
    <div class="displayElement">This is more information</div>
  </div>
</div>

When expandArrow is clicked, I want to display a table of additional data under that particular row. Can anyone help? Thanks!

I have tried this to no success:

$(".expandArrow").on("click", function (event) {
   var info = '';
   details += '<div><table class="detailTable">';
   details += '<tr><td>DisplayElement1</td><td>' + json.Id + '</td></tr>';
   details += '<tr><td>Display Element2</td><td>' + json.Info + '</td></tr>';
   details += '</table></div>';

   $(this).parent().append(details);
});

Answer 1

You have var info = '' , where you should have var details = ...

Here's the fix:

var details = '<div><table class="detailTable">';
details += '<tr><td>DisplayElement1</td><td>' + json.Id + '</td></tr>';
details += '<tr><td>Display Element2</td><td>' + json.Info + '</td></tr>';
details += '</table></div>';

Also, make sure you wrap it in a ready function so the DOM loads before the javascript runs. Otherwise it binds the click before the DOM is loaded. http://api.jquery.com/ready/

Answer 2

That code snippit does not look too bad, but what is json.Id and json.Info. Are you sure they exist in that scope?

Have you tried running that script with firefox/firebug or chrome? They might indicate errors.

Answer 3

Changed json.Id and json.Info with 11, 22

   <div id="display">
      <div class="displayRow">
          <img src="images/expand-arrow.gif" class="expandArrow" alt="expand" />
        <div class="displayElement">1</div>
        <div class="displayElement">Standard</div>
        <div class="displayElement">This is more information</div>
      </div>
      <div class="displayRow">
          <img src="images/expand-arrow.gif" class="expandArrow" alt="expand" />
        <div class="displayElement">2</div>
        <div class="displayElement">Special</div>
        <div class="displayElement">This is more information</div>
      </div>
    </div​​​​​>


$('.expandArrow').on("click", function (event) {
   var info = '';

   var details = '<div><table class="detailTable">';
   details += '<tr><td>DisplayElement1</td><td>' +  11 + '</td></tr>';
   details += '<tr><td>Display Element2</td><td>' + 22 +  '</td></tr>';
   details += '</table></div>';  

   $(this).parent().append(details);
});​

Answer 4

$(".expandArrow").on("click", function(event) {

    var details = '<div><table class="detailTable">';
    details += '<tr><td>DisplayElement1</td><td>' + json.Id  + '</td></tr>';
    details += '<tr><td>Display Element2</td><td>' + json.Info + '</td></tr>';
    details += '</table></div>';

    $(details).appendTo($(this).parent());
});