jQuery：按钮切换没有按预期运行

Question

我刚刚在学习jQuery，想知道是否有可能让我的代码有效的方法？当我点击绿色按钮时，它不显示第二个表格行。我能做些什么来避免将来出现这种错误？我愿意接受任何帮助！谢谢，麻烦您了。

的jQuery：

$(document).ready(function() { 
    $("button").click(function() { 
     $(".row2").show(); 
    }); 
}); 

HTML：

<table> 
    <tr class="row1"> 
     <td> 
      <p>This is where the text in the boxes will go!</p> 
     </td> 
     <td> 
      <p>This is where the text in the boxes will go!</p> 
     </td> 
     <td> 
      <p>This is where the text in the boxes will go!</p> 
     </td> 
     <tr class="row2"> 
      <td> 
       <p>This is where the text in the boxes will go!</p> 
      </td> 
      <td> 
       <p>This is where the text in the boxes will go!</p> 
      </td> 
      <td> 
       <p>This is where the text in the boxes will go!</p> 
      </td> 
     </tr> 
</table> 
<a class="greenbuttontext" href="#"><button class="showmorebutton">Show9 more concepts</button></a> 

CSS：

/*styles for green showmore button*/ 
.showmorebutton { 
    height: 33px; 
    border: solid #628b06 1px; 
    border-radius: 5px; 
    width: 200px; 
    margin-left: 600px; 
    margin-bottom: 25px; 
    text-align: center; 
    background-color: #99cd00; 
    color: white; 
    vertical-align: center; 
    line-height: 33px; 
} 

.greenbuttontext { 
    text-decoration: none; 
} 

/*row2 disappear*/ 
.row2 { 
    display:none; 
} 

Answer 1

你的html无效。内部在标签

<a class="greenbuttontext" href="#"><button class="showmorebutton">Show 
      9 more concepts</button></a> 

变化到

<a class="greenbuttontext" href="#"></a> 
<button class="showmorebutton">Show 
      9 more concepts</button> 

注按钮：一个标记是内联块元素。

Answer 2

不要在<a />标签包裹<button />？点击事件可能会在锚点上而不是按钮上触发。