Javascript 在表中显示/隐藏值

我有一张这样的桌子：

<table id="example">
<thead>
<tr>
    <th>Header1</th>
    <th>Header2</th>
    <th>Header3</th>
</tr>
</thead>

<tbody>
<tr>
   <td>some php to get custom field</td>
   <td>also custom field- the loop is above so this is working as it should</td>
   <td>
   <a href="#" class="showhide"> 
    <div class="more">
     .. the content I want to show when user clicks a class="showhide"
    </div>
   </a>
   </td>
<tr>
</tbody>
</table>

我也用document.ready完成了，但仍然不工作。还有别的办法吗

我想要的是div class=more的内容将显示在表中的行下面，并显示在下一行的前面，当然是在单击a class=showhide时

我将它与插件数据表一起使用，但这不会导致问题。

您拥有的类是showmore而不是showhide

基于OP注释进行编辑：我缩短了html以使其变得简单，并从标记中删除了div

Html

您拥有的类是showmore而不是showhide

基于OP注释进行编辑：我缩短了html以使其变得简单，并从标记中删除了div

Html

---

在标记中更改此选项：

 class="showmore"> 

为此：

 class="showhide"> 

或者这样做：

$('.showmore').click(function (e) {
    e.preventDefault();
    $(this).next().toggle()
});

注: 这是无效的html：

<a href="#" class="showhide"> 
<div class="more">
 .. the content I want to show when user clicks a class="showhide"
</div>

---

在标记中更改此选项：

 class="showmore"> 

为此：

 class="showhide"> 

或者这样做：

$('.showmore').click(function (e) {
    e.preventDefault();
    $(this).next().toggle()
});

注: 这是无效的html：

<a href="#" class="showhide"> 
<div class="more">
 .. the content I want to show when user clicks a class="showhide"
</div>

---

对不起，我输入问题时输入错误。仍然无法工作，问题仍然存在：对不起，我输入问题时输入错误。仍然不能工作，问题仍然存在：对不起，我在输入问题时输入了一个错误，否则类是正确的，不能工作。我只需要输入documentready并切换其他jquery调用。谢谢Jai！很抱歉，我在输入问题时输入了一个错误，否则类是正确的，不能正常工作，我只需要输入documentready并切换其他jquery调用。谢谢Jai！

<a href="#" class="showhide"> 
<div class="more">
 .. the content I want to show when user clicks a class="showhide"
</div>

<a href="#" class="showmore">show more</a> 
<div class="more">
 .. the content I want to show when user clicks a class="showhide"
</div>

$('.showmore').click(function (e) {
    e.preventDefault();
    $(this).children('more').toggle();
});