Question

我有一个像这样的结构表：

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

我尝试用jQuery实现，但没有任何反应。这是我试过的jQuery：

$(function () {
    $('.showhide').click(function () {
        $(this).next().toggle()
    });
});

我也使用document.ready并且仍然无效。还有其他办法吗？

我想要的只是div类的内容=＆＃34;更多＆＃34;当单击a class="showhide"时，将显示在表格中的行下方（以及下一行的前面）。

我与插件DataTables一起使用它，但这不会导致问题。

Answer 1

您所拥有的课程为showmore而不是showhide

<强> Live Demo

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

根据OP评论进行修改：我缩短了html，使其变得简单，并从div代码中取出a。

<强> Live Demo

HTML 的

<table id="example">
    <tbody>
        <tr>
            <td> <a href="#" class="showhide"> Show / Hide </a>

                <div class="more">.. the content I want to show when user clicks a class="showmore"</div>
            </td>
        </tr>
    </tbody>
</table>

的Javascript

$(function () {
    $('.showhide').click(function () {
        $(this).next().toggle()
    });
});

Answer 2

在标记中更改此内容：

 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>

改为：

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

或者您可以使用.children()而不是.next()

尝试这个

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

TRYOUT IN FIDDLE HERE

Answer 3

$(document).on('click','.showmore',function(){
//your code..
})

显示/隐藏表格中的值

3 个答案:

注意：

TRYOUT IN FIDDLE HERE