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