Javascript Jquery将div追加到特定表行之后

我定义了一个表：

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

1.
标准
这是更多的信息
2.
特别的
这是更多的信息

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

$（.expandArrow”）。在（“单击”）上，函数（事件）{
var信息=“”；
详情+=''；
details+='displayement1'+json.Id+''；
详细信息+='displayement2'+json.Info+''；
详情+=''；
$（this.parent（）.append（详细信息）；
});

您有

var info='

，您应该有

var详细信息=…

以下是修复方法：

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

var详细信息=”；
details+='displayement1'+json.Id+''；
详细信息+='displayement2'+json.Info+''；
详情+=''；

另外，请确保将其包装在

ready

函数中，以便在javascript运行之前加载DOM。否则，它会在加载DOM之前绑定单击

您有

var info='

，其中您应该有

var详细信息=…

以下是修复方法：

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

var详细信息=”；
details+='displayement1'+json.Id+''；
详细信息+='displayement2'+json.Info+''；
详情+=''；

---

另外，请确保将其包装在

ready

函数中，以便在javascript运行之前加载DOM。否则，它会在加载DOM之前绑定单击

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

---

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

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

---

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

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

1.
标准
这是更多的信息
2.
特别的
这是更多的信息
$（'.expandArrow'）。在（“单击”上，函数（事件）{
var信息=“”；
var详细信息=“”；
详细信息+='DisplayElement1'+11+''；
详细信息+='显示元素2'+22+''；
详情+=''；
$（this.parent（）.append（详细信息）；
});​

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

1.
标准
这是更多的信息
2.
特别的
这是更多的信息
$（'.expandArrow'）。在（“单击”上，函数（事件）{
var信息=“”；
var详细信息=“”；
详细信息+='DisplayElement1'+11+''；
详细信息+='显示元素2'+22+''；
详情+=''；
$（this.parent（）.append（详细信息）；
});​
$（.expandArrow”）。在（“单击”）上，函数（事件）{
var详细信息=“”；
details+='displayement1'+json.Id+''；
详细信息+='displayement2'+json.Info+''；
详情+=''；
$（详细信息）.appendTo（$（this.parent（））；
});
$（.expandArrow”）。在（“单击”）上，函数（事件）{
var详细信息=“”；
details+='displayement1'+json.Id+''；
详细信息+='displayement2'+json.Info+''；
详情+=''；
$（详细信息）.appendTo（$（this.parent（））；
});
您的图像标签未关闭。Switz answer适用于您。问题是：您还必须确保
json
对象在该范围内可用。@CodeBlue，我也看到了，不知道为什么被否决：（@CodeBlue:除非您针对XHTML进行验证，否则这不是必需的。您的图像标记没有关闭。Switz-answer适合您。这里是小提琴：您还必须确保
json
对象在该范围内可用。@CodeBlue，我也看到了，不知道为什么被否决：（@CodeBlue:除非您针对XHTML进行验证，否则这不是必需的。）。