Jquery的追加某些表行

后的div我有一个表中定义：Jquery的追加某些表行

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

来源

2012-03-06 Garrett

您的图片标签未关闭。 – CodeBlue 2012-03-06 19:14:35

Switz答案适合您。这里是小提琴：http://jsfiddle.net/LnrrB/ – 2012-03-06 19:22:26

另外你必须确保'json'对象在该范围内可用。 – 2012-03-06 19:23:57

你有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/

来源

2012-03-06 19:13:17 switz

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

您是否尝试过使用firefox/firebug或chrome运行该脚本？他们可能会指出错误。

来源

2012-03-06 19:16:37

改变json.Id和json.Info 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); 
});

来源

2012-03-06 19:20:58 dotoree

为什么downvoted请？ – dotoree 2012-03-06 19:27:26

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

来源

2012-03-06 19:25:53 Diode

Jquery的追加某些表行

回答

相关问题