使用 jquery 隱藏表行

Question

簡而言之，我只想用綠色的“顯示”按鈕顯示表格行，而我想隱藏其他行。

截圖 2截圖 3

問題是由於 PHP for循環，表行上有一個公共類。 我試圖通過使用一種方法來隱藏帶有 jQ​​uery 的行，如果綠色按鈕id相似，則隱藏其他tr行，但它不起作用。

任何幫助，將不勝感激

if (jQuery(".button").is("#john")) {
  jQuery("tr").addClass('john');
}

上面的代碼只是給帶有綠色顯示按鈕的tr行一個類，但是它給每個tr行一個類。

<div class="notification notice margin-bottom-25"><p class=""><?php esc_html_e( 'Your listings are shown in the table below.', 'workscout' ); ?></p></div>
        <div class="job-div-fix-right">
            <?php 
        $submit_job_page = get_option('job_manager_submit_job_form_page_id');
        if (!empty($submit_job_page)) {  ?>
            <a href="<?php echo get_permalink($submit_job_page) ?>" class="button margin-top-30"><?php esc_html_e('Add Job','workscout'); ?></a>
        <?php } ?>
        </div>
    <div class="dashboard-list-box margin-top-30" id="job-manager-job-dashboard">
        <div class="dashboard-list-box-content">
        <table class="job-manager-jobs manage-table responsive-table" id="dude"> 
            <thead>
                <tr class="dd">
                    <?php 
                    foreach ( $job_dashboard_columns as $key => $column ) : ?>
                        <th class="<?php echo esc_attr( $key ); ?>"><?php echo workscout_manage_table_icons($key); echo esc_html( $column ); ?></th>
                    <?php endforeach; ?>
                        <th></th> 
                </tr>
            </thead>

            <tbody>
                <?php if ( ! $jobs ) : ?>
                    <tr>
                        <td colspan="6"><?php esc_html_e( 'You do not have any active listings.', 'workscout' ); ?></td>
                    </tr>
                <?php else : ?>
                    <?php foreach ( $jobs as $job ) : ?>
                        <tr>
                            <?php foreach ( $job_dashboard_columns as $key => $column ) : ?>
                                <td class="<?php echo esc_attr( $key ); ?>">
                                    <?php if ('job_title' === $key ) : ?>
                                        <?php if ( $job->post_status == 'publish' ) : ?>
                                            <a href="<?php echo get_permalink( $job->ID ); ?>"><?php echo esc_html($job->post_title); ?></a>
                                        <?php else : ?>
                                            <?php echo esc_html($job->post_title); ?> <small>(<?php the_job_status( $job ); ?>)</small>
                                        <?php endif; ?>
                                    
                                        
                                    <?php elseif ('date' === $key ) : ?>
                                        <?php echo date_i18n( get_option( 'date_format' ), strtotime( $job->post_date ) ); ?>   
                                    <?php elseif ('expires' === $key ) : ?>
                                        <?php echo $job->_job_expires ? date_i18n( get_option( 'date_format' ), strtotime( $job->_job_expires ) ) : '&ndash;'; ?>
                                    <?php elseif ('filled' === $key ) : ?>
                                        <?php echo is_position_filled( $job ) ? '&#10004;' : '&ndash;'; ?>






                                    <?php elseif ('applications' === $key ) : ?>
                                        <?php 
                                            global $post;
                                            echo ( $count = get_job_application_count( $job->ID ) ) ? '<a id="john" class="button" href="' . add_query_arg( array( 'action' => 'show_applications', 'job_id' => $job->ID ), get_permalink( $post->ID ) ) . '">'.__('Show','workscout').' (' . $count . ')</a>' : '&ndash;';

                                                //echo $post->ID;

                                                 //echo esc_html($job->ID); 
                                        ?>






                                    <?php else : ?>
                                        <?php do_action( 'job_manager_job_dashboard_column_' . $key, $job ); ?>
                                    <?php endif; ?>
                                </td>
                            <?php endforeach; ?>
                                <td class="action">

                                        <?php
                                            $actions = array();

                                            switch ( $job->post_status ) {
                                                case 'publish' :
                                                    if ( wpjm_user_can_edit_published_submissions() ) {
                                                        $actions[ 'edit' ] = array( 'label' => __( 'Edit', 'workscout' ), 'nonce' => false );
                                                    }
                                                
                                                    if ( is_position_filled( $job ) ) {
                                                        $actions['mark_not_filled'] = array( 'label' => esc_html__( 'Mark not filled', 'workscout' ), 'nonce' => true );
                                                    } else {
                                                        $actions['mark_filled'] = array( 'label' => esc_html__( 'Mark filled', 'workscout' ), 'nonce' => true );
                                                    }

                                                    $actions['duplicate'] = array( 'label' => __( 'Duplicate', 'wp-job-manager' ), 'nonce' => true );
                                                    break;
                                                case 'expired' :
                                                    if ( job_manager_get_permalink( 'submit_job_form' ) ) {
                                                        $actions['relist'] = array( 'label' => esc_html__( 'Relist', 'workscout' ), 'nonce' => true );
                                                    }
                                                    break;
                                                case 'pending_payment' :
                                                case 'pending' :
                                                    if ( job_manager_user_can_edit_pending_submissions() ) {
                                                        $actions['edit'] = array( 'label' => esc_html__( 'Edit', 'workscout' ), 'nonce' => false );
                                                    }
                                                case 'draft' :
                                                case 'preview' :
                                                    echo 'kkkkkk'.$actions['continue'] = array( 'label' => __( 'Continue Submission', 'workscout' ), 'nonce' => true );
                                                    break;
                                                break;
                                            }

                                            $actions['delete'] = array( 'label' => esc_html__( 'Delete', 'workscout' ), 'nonce' => true );
                                            $actions           = apply_filters( 'job_manager_my_job_actions', $actions, $job );

                                            foreach ( $actions as $action => $value ) {
                                                $action_url = add_query_arg( array( 'action' => $action, 'job_id' => $job->ID ) );
                                                if ( $value['nonce'] ) {
                                                    $action_url = wp_nonce_url( $action_url, 'job_manager_my_job_actions' );
                                                }
                                                echo '<a href="' . esc_url( $action_url ) . '" class="job-dashboard-action-' . esc_attr( $action ) . '">' .workscout_manage_action_icons($action) . esc_html( $value['label'] ) . '</a>';
                                            }
                                        ?>
                                    
                                </td>
                        </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
        <?php get_job_manager_template( 'pagination.php', array( 'max_num_pages' => $max_num_pages ) ); ?>

        </div>
    </div>


    <script type="text/javascript">
        if (jquery(#john).length){
            alert("Hello! I am an alert box!!");
        }



    </script>

Answer 1

還可以查看您的 HTML，但我認為您想要執行以下操作：

jQuery(".button").is("#john").parent("tr").addClass('john');

您可能還想刪除上述之前的任何 'john' 類，使用：

jQuery("tr").removeClass('john');
jQuery("#john.button").parent("tr").addClass('john');

Answer 2

為此，您可以使用:not()和:has()選擇器：

$('#yourTable tr:not(:has(.button))').hide();

顯然，您需要修改#yourTable和.button選擇器，使其與項目中的 HTML 相關。

Answer 3

每個循環將遍歷所有 tr 行並檢查該行中的第 6 個 td 元素內是否有 html 元素。

$("#yourTable tr").each(function (index) {
        let button = $(`#yourTable > tr:nth-child(${index}) > td:nth-child(6)`).html();
        if (button) {
            $(`#yourTable > tr:nth-child(${index})`).addClass("john");
        }
    });