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之前绑定点击。 http://api.jquery.com/ready/

Answer 2

代码snippit看起来并不太糟糕，但是什么是json.Id和json.Info。你确定它们存在于那个范围内吗？

您是否尝试过使用firefox / firebug或chrome运行该脚本？它们可能表示错误。

Answer 3

用11,22改变了json.Id和json.Info

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

Jquery在某些表行之后附加div

4 个答案: