使用 JQuery 在附加行中显示表详细信息

Question

我有一个 html 表格，我想使用切换来显示其他信息（然后向下推其他行）。

描述我想做什么的图片：https://www.screencast.com/t/SBzG2IN9 单击切换时，显示附加行（绿色）并将表格向下推。

注意：下面的代码不是 HTML，而是 WordPress 工具集的后端。 [wpv-post-id] 是一个工具集变量，它将在前端输出 wordpress postid。例如，1915，因此 data-prod-cat="1915" 并且类变为“cat1915”。

[wpv-post-excerpt format="noautop"] 还以纯文本形式输出相应的帖子摘录（不带

)。

更新： 我更新了代码，并且切换按钮 设法将显示 从 display:none 更改为 display: table-row;但是，摘录中没有显示新行。

更新 2：已解决！

这是循环输出：

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
    <table width="100%">
        <thead>
            <tr>
                <th>[wpv-heading name="types-field-release-date"]Year[/wpv-heading]</th>
                <th>[wpv-heading name="post-link"]Title[/wpv-heading]</th>
                <th>[wpv-heading name="types-field-publisher"]Publisher[/wpv-heading]</th>
                <th>[wpv-heading name="post-excerpt"]Synopsis[/wpv-heading]</th>
            </tr>
        </thead>
        <tbody class="wpv-loop js-wpv-loop">
        <wpv-loop>
            <tr>
                <td>[types field='release-date' style='text' format='Y'][/types]</td>
                <td>[wpv-post-link]</td>
                <td>[types field="publisher"][/types]</td>
                <td><a href="#" class="toggler" data-prod-cat='[wpv-post-id]'><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a></td>
            </tr>
            <tr class="cat[wpv-post-id]" style="display:none" [wpv-post-excerpt format="noautop"]></tr>
        </wpv-loop>
        </tbody>
    </table>
    <!-- wpv-loop-end -->
    [/wpv-items-found]
    [wpv-no-items-found]
        <strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
    [/wpv-no-items-found]
[wpv-layout-end]

jQuery(document).ready(function(){
     jQuery(".toggler").click(function(e){
        e.preventDefault();
       jQuery('.cat'+jQuery(this).attr('data-prod-cat')).toggle();
    });
});

Answer 1

您的代码的问题是 tr 仅当它位于 table 标记内时才能用作表格行。其次，您不能在选择器中使用[ 或]。因此，请根据此更改您的代码：

<table>
    <wpv-loop>
      <tr>
        <td>[types field='release-date' style='text' format='Y'][/types]</td>
        <td>[wpv-post-link]</td>
        <td>[types field="publisher"][/types]</td>
        <td><a href="#" class="toggler" data-prod-cat='wpv-post-excerpt'><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a></td>
      </tr>
      <tr class="cat-wpv-post-excerpt" style="display:none">
        <td colspan="100%">I m test</td>
      </tr>
    </wpv-loop>
</table>

你的js代码是这样的：

jQuery(document).ready(function() {
  $(".toggler").click(function(e) {
    e.preventDefault();
    $('.cat-' + $(this).attr('data-prod-cat')).toggle();
  });
});

Answer 2

您不能在 css 选择器或类名中使用 [ 和 ]。因为它们是默认的属性选择器。

您必须将您的课程更改为带有A-Za-z0-9 字符的东西。

见attribute selector

当你想用.cat[wpv-post-excerpt] 选择元素时。浏览器认为你想要这样的东西： <tr class="cat" wpv-post-excerpt=""></tr>

在那之后，我认为它是模板变量，而不是真正的 [wpv-post-excerpt] 字符串。查看您的主题的结果并使用它们完成您的工作。

Answer 3

jQuery(document).ready(function() {
  $(".toggler").click(function(e) {
    e.preventDefault();
    $('.cat-' + $(this).attr('data-prod-cat')).toggle();
  });
});

<wpv-loop>
 <table>
  <tr>
    <td>[types field='release-date' style='text' format='Y'][/types]</td>
    <td>[wpv-post-link]</td>
    <td>[types field="publisher"][/types]</td>
    <td><a href="#" class="toggler" data-prod-cat='wpv-post-excerpt'><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a></td>
  </tr>
  <tr class="cat-wpv-post-excerpt" style="display:none">
   <td>all reacords</td>
  </tr>
 </table>
</wpv-loop>

Answer 4

好的解决了！

jQuery(document).ready(function(){
     jQuery(".toggler").click(function(e){
        e.preventDefault();
       jQuery('.cat'+jQuery(this).attr('data-prod-cat')).toggle();
    });
});

此代码有效，但较早的答案表明 css 选择器不适用于 []。但这只是后端的一个变量。但是，[wpv-post-excerpt] 输出了一个很长的段落，它也不能用作选择器。所以我使用了 [wpv-post-id] 来输出 wordpress 帖子 ID。

这是有效代码的 sn-p：

<table>
        <wpv-loop>
            <tr>
                <td>[types field='release-date' style='text' format='Y'][/types]</td>
                <td>[wpv-post-link]</td>
                <td>[types field="publisher"][/types]</td>
                <td><a href="#" class="toggler" data-prod-cat='[wpv-post-id]'><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a></td>
            </tr>
            <tr class="cat[wpv-post-id]" style="display:none">
            <td colspan="4">[wpv-post-excerpt]</td>
            </tr>
        </wpv-loop>
        </tbody>
</table>