如何实现Bootstrap表格整行可点击折叠并添加点击变色效果

Got it, let's get your table working exactly how you want it! Here's the modified code that lets you click the entire row to toggle collapse, plus adds the background color change when the row is expanded:

Modified Full Code #

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<style>
.table td, .table th { 
    padding-left: 1.75rem; 
} 
.table-header { 
    background-color: #28283e; 
    color: #f9f9f9; 
} 
.accounts-table:hover{ 
    background-color: #fafafa; 
} 
a.right-angle { 
    color: orange; 
}
/* Custom class for active expanded row */
.expanded-row {
    background-color: #E1E2E2 !important;
}
</style>

<table class="table">
    <!-- Table Headings -->
    <thead class="table-header">
        <tr>
            <th scope="col"></th>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Type</th>
            <th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
            <th scope="col">Last Login</th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <!-- Table Row 1 -->
        <tr class="accounts-table collapsible-row" data-toggle="collapse" data-target="#AccountDetails">
            <td>
                <a href="#" class="right-angle option-tab"><i class="fas fa-angle-right"></i></a>
            </td>
            <td>[0708]</td>
            <td>Mark Jonas</td>
            <td>Guest</td>
            <td class="success">Active</td>
            <td>22/11/2018</td>
            <td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
        </tr>
        <!-- Table Row 1 Collapse -->
        <tr>
            <td class="insert-here coll-bg" colspan="7"> <!-- Fixed colspan to match 7 table columns -->
                <div class="collapse" id="AccountDetails">
                    <p>Hello World</p>
                </div>
            </td>
        </tr>
        <!-- Table Row 2 - Add collapsible-row class if you want it to support collapse later -->
        <tr class="accounts-table">
            <td><i class="fas fa-angle-right"></i></td>
            <td>[2589]</td>
            <td>John Smith</td>
            <td>Guest</td>
            <td class="danger">Disabled</td>
            <td>N/A</td>
            <td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
        </tr>
        <!-- Table Row 3 - Add collapsible-row class if you want it to support collapse later -->
        <tr class="solid-rows">
            <td><i class="fas fa-angle-right"></i></td>
            <td>[9147]</td>
            <td>Murray Loius</td>
            <td>Guest + Host</td>
            <td class="warning">Pending Email</td>
            <td>N/A</td>
            <td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
        </tr>
    </tbody><!-- END OF TABLE BODY -->
</table><!-- END OF TABLE -->

<script>
$(document).on("click",".collapsible-row",function(){
    // Toggle the angle icon inside the clicked row
    const angleIcon = $(this).find(".fas");
    angleIcon.toggleClass("fa-angle-right fa-angle-down");
    
    // Toggle the expanded row background color
    $(this).toggleClass("expanded-row");
});

// Optional: Sync background color if collapse is triggered via other methods (e.g. keyboard)
$('#AccountDetails').on('shown.bs.collapse', function () {
    $(this).closest('tbody').find('.collapsible-row').addClass('expanded-row');
});

$('#AccountDetails').on('hidden.bs.collapse', function () {
    $(this).closest('tbody').find('.collapsible-row').removeClass('expanded-row');
});
</script>

Key Changes Explained #

• Full Row Trigger: Moved the Bootstrap collapse attributes (data-toggle and data-target) from the <a> tag to the table row itself, and added a collapsible-row class to target the click event. Now clicking anywhere on the row triggers the collapse.
• Background Color Toggle: Created a custom .expanded-row CSS class with your desired #E1E2E2 background color. The click handler uses toggleClass() to add/remove this class, keeping it synced with the collapse state.
• Icon Sync: Updated the JavaScript to find the angle icon inside the clicked row (instead of relying on direct children) to ensure it targets the correct icon even if the row structure changes.
• Layout Fix: Adjusted the colspan on the collapse row from 8 to 7 to match your table's 7 columns, preventing unwanted layout shifts.
• Fallback Sync: Added collapse event listeners to ensure the background color stays in sync if the collapse is ever triggered outside of row clicks (like keyboard navigation).

You can extend this functionality to other rows by adding the collapsible-row class and corresponding collapse targets, just like the first row.

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