javascript - Jquery 在特定表行之后追加 div

Question

我定义了一个表:

<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 时，我想在该特定行下显示一个包含附加数据的表格。谁能帮忙？谢谢!

我已经试过了，但没有成功:

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

您有 var info = ''，您应该有 var details = ...

修复方法如下:

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>';

此外，请确保将其包装在 ready 函数中，以便在 javascript 运行之前加载 DOM。否则它会在加载 DOM 之前绑定(bind)点击。 http://api.jquery.com/ready/