WordPress插件动态ID表格行切换功能故障求助

算力阿峰

2026-8-14

问题：点击表格行展开详情仅首行生效，其余行无响应

我是Web开发新手，首次从零开始开发WordPress插件，想要实现点击表格行展开额外信息行的功能。行ID采用baserow+文章ID、subrow+文章ID的动态命名规则，但目前只有首行点击能触发切换，其余行完全没反应，求技术帮助。

现有代码

.php 文件

<?php 

$args = array(
  'post_type' => 'ecalendar-event',
  'orderby' => '_ecalendar_meta_date',
'order' => 'ASC',
  'tax_query' => array(
    array(
      'taxonomy' => 'ecalendar_category',
      'field' => 'slug',
      'terms' => 'kek'
    )
  )
);
$kek_events = new WP_Query( $args );

if( $kek_events->have_posts() ) {
  while( $kek_events->have_posts() ) {
    $kek_events->the_post();
    $id =  'subrow'.$post->ID;
    $bid = 'baserow'.$post->ID;
       ?>
       
       <tr id="<?php echo $bid;?>">
        <input type="hidden" id="baserow_id" value="<?php echo $bid ?>">
        <input type="hidden" id="subrow_id" value="<?php echo $id ?>">

        <td><?php echo get_post_meta($post->ID, '_ecalendar_meta_date_formatted', true);?></td>
        <td><?php echo get_post_meta($post->ID, '_ecalendar_meta_place', true);?></td>
        <td><?php echo get_post_meta($post->ID, '_ecalendar_meta_class', true);?></td>
        <td><?php echo get_post_meta($post->ID, '_ecalendar_meta_organizer', true);?></td>
        <td><?php echo get_post_meta($post->ID, '_ecalendar_meta_status', true);?></td>
       </tr>

        <tr id = "<?php echo $id;?>" style="display: none;">
            <td colspan="2">Paikka</td>
            <td colspan="3"><?php echo get_post_meta($post->ID, '_ecalendar_meta_address', true);?></td>
        </tr>
        <tr id = "<?php echo $id;?>" style="display: none;">
            <td colspan="2">Ylituomari</td>
            <td colspan="3"><?php echo get_post_meta($post->ID, '_ecalendar_meta_first_judge', true);?></td>
        </tr>
        <tr id = "<?php echo $id;?>" style="display: none;">
            <td colspan="2">Palkintotuomari</td>
            <td colspan="3"><?php echo get_post_meta($post->ID, '_ecalendar_meta_second_judge', true);?></td>
        </tr>
        <tr id = "<?php echo $id;?>" style="display: none;">
            <td colspan="2">Rajoitukset</td>
            <td colspan="3"><?php echo get_post_meta($post->ID, '_ecalendar_meta_limit', true);?></td>
        </tr>
        <tr id = "<?php echo $id;?>" style="display: none;">
            <td colspan="2">Etusija</td>
            <td colspan="3"><?php echo get_post_meta($post->ID, '_ecalendar_meta_priority', true);?></td>
        </tr>
        <tr id = "<?php echo $id;?>" style="display: none;">
            <td colspan="2">Ilm.aika</td>
            <td colspan="3"><?php echo get_post_meta($post->ID, '_ecalendar_meta_enrollment1', true);?>-<?php echo get_post_meta($post->ID, '_ecalendar_meta_enrollment1', true);?></td>
        </tr>
        <tr id = "<?php echo $id;?>" style="display: none;">
            <td colspan="2">Os.maksu</td>
            <td colspan="3">Yleinen: <?php echo get_post_meta($post->ID, '_ecalendar_meta_price1', true);?>€, Jäsenille: <?php echo get_post_meta($post->ID, '_ecalendar_meta_price2', true);?>€</td>
        </tr>
        <tr id ="<?php echo $id;?>" style="display: none;"> 
            <td colspan="2">Lisätiedot</td>
            <td colspan="3"><?php echo get_post_meta($post->ID, '_ecalendar_meta_info', true);?></td>
        </tr>
        <tr id = "<?php echo $id;?>" style="display: none;">
            <td colspan="2">Muuta</td>
            <td colspan="3"><?php echo get_post_meta($post->ID, '_ecalendar_meta_other', true);?></td>
        </tr>
        <tr id = "<?php echo $id;?>" style="display: none;">
            <td colspan="2">Tiedustelut</td>
            <td colspan="3"><?php echo get_post_meta($post->ID, '_ecalendar_meta_contact', true);?></td>
       </tr><?php 

    }
  }

  wp_reset_postdata()

 ?>

.js 文件

jQuery(document).ready(function() {
    jQuery('table#kek-kokeet tbody tr#'+jQuery('#baserow_id').val()).click(function() {
        
        jQuery('table#kek-kokeet tbody tr#'+jQuery('#subrow_id').val()).toggle(400);
    });

});

问题原因与修复方案

核心问题

ID重复违规：页面中所有隐藏input都用了baserow_id和subrow_id这两个相同ID，HTML要求ID必须唯一，导致JS只能获取到第一个元素的值。
详情行ID重复：同一篇文章的所有详情行都用了同一个subrow+文章ID，ID重复会导致选择器失效。
事件绑定范围错误：JS只给首行绑定了点击事件，其余行没有绑定。

修改后的代码

.php 文件（关键修改点）

移除重复的隐藏input，给主行添加data-post-id属性关联文章ID
给所有详情行添加统一class，用subrow-文章ID作为标识，避免ID重复

<?php 

$args = array(
  'post_type' => 'ecalendar-event',
  'orderby' => '_ecalendar_meta_date',
'order' => 'ASC',
  'tax_query' => array(
    array(
      'taxonomy' => 'ecalendar_category',
      'field' => 'slug',
      'terms' => 'kek'
    )
  )
);
$kek_events = new WP_Query( $args );

if( $kek_events->have_posts() ) {
  while( $kek_events->have_posts() ) {
    $kek_events->the_post();
    $post_id = $post->ID;
       ?>
       <!-- 主行：添加data-post-id属性，方便JS关联详情行 -->
       <tr class="baserow" data-post-id="<?php echo $post_id;?>">
        <td><?php echo get_post_meta($post_id, '_ecalendar_meta_date_formatted', true);?></td>
        <td><?php echo get_post_meta($post_id, '_ecalendar_meta_place', true);?></td>
        <td><?php echo get_post_meta($post_id, '_ecalendar_meta_class', true);?></td>
        <td><?php echo get_post_meta($post_id, '_ecalendar_meta_organizer', true);?></td>
        <td><?php echo get_post_meta($post_id, '_ecalendar_meta_status', true);?></td>
       </tr>

        <!-- 详情行：用class替代重复ID，每个详情行添加subrow和subrow-{$post_id} class -->
        <tr class="subrow subrow-<?php echo $post_id;?>" style="display: none;">
            <td colspan="2">Paikka</td>
            <td colspan="3"><?php echo get_post_meta($post_id, '_ecalendar_meta_address', true);?></td>
        </tr>
        <tr class="subrow subrow-<?php echo $post_id;?>" style="display: none;">
            <td colspan="2">Ylituomari</td>
            <td colspan="3"><?php echo get_post_meta($post_id, '_ecalendar_meta_first_judge', true);?></td>
        </tr>
        <tr class="subrow subrow-<?php echo $post_id;?>" style="display: none;">
            <td colspan="2">Palkintotuomari</td>
            <td colspan="3"><?php echo get_post_meta($post_id, '_ecalendar_meta_second_judge', true);?></td>
        </tr>
        <tr class="subrow subrow-<?php echo $post_id;?>" style="display: none;">
            <td colspan="2">Rajoitukset</td>
            <td colspan="3"><?php echo get_post_meta($post_id, '_ecalendar_meta_limit', true);?></td>
        </tr>
        <tr class="subrow subrow-<?php echo $post_id;?>" style="display: none;">
            <td colspan="2">Etusija</td>
            <td colspan="3"><?php echo get_post_meta($post_id, '_ecalendar_meta_priority', true);?></td>
        </tr>
        <tr class="subrow subrow-<?php echo $post_id;?>" style="display: none;">
            <td colspan="2">Ilm.aika</td>
            <td colspan="3"><?php echo get_post_meta($post_id, '_ecalendar_meta_enrollment1', true);?>-<?php echo get_post_meta($post_id, '_ecalendar_meta_enrollment1', true);?></td>
        </tr>
        <tr class="subrow subrow-<?php echo $post_id;?>" style="display: none;">
            <td colspan="2">Os.maksu</td>
            <td colspan="3">Yleinen: <?php echo get_post_meta($post_id, '_ecalendar_meta_price1', true);?>€, Jäsenille: <?php echo get_post_meta($post_id, '_ecalendar_meta_price2', true);?>€</td>
        </tr>
        <tr class="subrow subrow-<?php echo $post_id;?>" style="display: none;"> 
            <td colspan="2">Lisätiedot</td>
            <td colspan="3"><?php echo get_post_meta($post_id, '_ecalendar_meta_info', true);?></td>
        </tr>
        <tr class="subrow subrow-<?php echo $post_id;?>" style="display: none;">
            <td colspan="2">Muuta</td>
            <td colspan="3"><?php echo get_post_meta($post_id, '_ecalendar_meta_other', true);?></td>
        </tr>
        <tr class="subrow subrow-<?php echo $post_id;?>" style="display: none;">
            <td colspan="2">Tiedustelut</td>
            <td colspan="3"><?php echo get_post_meta($post_id, '_ecalendar_meta_contact', true);?></td>
       </tr><?php 

    }
  }

  wp_reset_postdata()

 ?>

.js 文件（关键修改点）

给所有主行（.baserow）绑定点击事件
通过当前点击行的data-post-id属性，找到对应的详情行（.subrow-{$post_id}）并切换显示

jQuery(document).ready(function() {
    // 给所有主行绑定点击事件
    jQuery('table#kek-kokeet tbody tr.baserow').click(function() {
        var postId = jQuery(this).data('post-id');
        // 切换对应文章ID的所有详情行
        jQuery('table#kek-kokeet tbody tr.subrow-' + postId).toggle(400);
    });
});

额外优化建议

可以给主行添加鼠标悬停样式，比如cursor: pointer，提升用户体验
如果需要实现点击其他行关闭当前展开的详情，可以在点击时先隐藏所有.subrow，再显示当前行对应的详情行

内容的提问来源于stack exchange，提问作者Jukra

WordPress插件动态ID表格行切换功能故障求助

现有代码 #

.php 文件 #

.js 文件 #

问题原因与修复方案 #

核心问题 #

修改后的代码 #

.php 文件（关键修改点）

.js 文件（关键修改点）

额外优化建议 #

现有代码

.php 文件

.js 文件

问题原因与修复方案

核心问题

修改后的代码

额外优化建议