CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Garrett
Garrett

Reputation: 1688

Jquery append div after certain table row

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);
});

Upvotes: 0

Views: 4383

Answers (4)

Diode
Diode

Reputation: 25135

$(".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());
});

Upvotes: 0

dotoree
dotoree

Reputation: 2993

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);
});​

Upvotes: 0

switz
switz

Reputation: 25188

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/

Upvotes: 4

W. Goeman
W. Goeman

Reputation: 1714

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.

Upvotes: 0

Related Questions