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

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

你必须用A-Za-z0-9字符改变你的类。

见attribute selector

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

在那之后，我认为它是模板变量，而不是真正的[wpv-post-excerpt]字符串。 看看你的主题的结果，并与他们一起做你的工作。

Answer 2

您的代码的问题是tr仅当它在table标记内时才作为 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 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。

这是有效的代码片段：

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