请求实现表格列自定义功能：支持增删列的按钮开发

Great question! Adding custom column management to your table is a fantastic way to let users tailor their view—here's a complete, vanilla JS solution that mimics the functionality you're looking for:

Step 1: Update Your Table Structure #

First, modify your existing table headers to include unique data-column attributes. This lets us map each header to its corresponding table cells:

<table class="table coin_table">
  <thead>
    <tr>
      <th data-column="name">Name</th>
      <th data-column="price">Price USD</th>
      <th data-column="dominance">Dominance</th>
      <th data-column="price-btc" style="display:none;">Price BTC</th> <!-- Hidden by default -->
      <th data-column="volume">Volume 24h</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-column="name">Bitcoin</td>
      <td data-column="price">$45,000</td>
      <td data-column="dominance">48%</td>
      <td data-column="price-btc" style="display:none;">1.0 BTC</td>
      <td data-column="volume">$20B</td>
    </tr>
    <!-- More rows... -->
  </tbody>
</table>

Step 2: Add Column Settings UI #

Add a button and a collapsible panel to let users select which columns to show/hide:

<!-- Column Settings Button -->
<button id="column-settings-btn" class="column-settings-btn">⚙️ Columns</button>

<!-- Column Settings Panel -->
<div id="column-settings-panel" class="column-settings-panel">
  <h4>Customize Columns</h4>
  <ul>
    <li><label><input type="checkbox" checked data-column="name"> Name</label></li>
    <li><label><input type="checkbox" checked data-column="price"> Price USD</label></li>
    <li><label><input type="checkbox" checked data-column="dominance"> Dominance</label></li>
    <li><label><input type="checkbox" data-column="price-btc"> Price BTC</label></li>
    <li><label><input type="checkbox" checked data-column="volume"> Volume 24h</label></li>
  </ul>
</div>

Step 3: Add JavaScript Logic #

This code handles toggling the settings panel, showing/hiding columns, and persisting user preferences to localStorage:

// Get elements
const settingsBtn = document.getElementById('column-settings-btn');
const settingsPanel = document.getElementById('column-settings-panel');
const columnCheckboxes = document.querySelectorAll('#column-settings-panel input[type="checkbox"]');

// Toggle settings panel visibility
settingsBtn.addEventListener('click', () => {
  settingsPanel.classList.toggle('active');
});

// Load saved column preferences from localStorage
function loadColumnPreferences() {
  const savedColumns = JSON.parse(localStorage.getItem('coinTableColumns')) || {};
  columnCheckboxes.forEach(checkbox => {
    const column = checkbox.dataset.column;
    // Use saved state or default to checkbox's initial checked value
    const isChecked = savedColumns[column] !== undefined ? savedColumns[column] : checkbox.checked;
    checkbox.checked = isChecked;
    toggleColumn(column, isChecked);
  });
}

// Show/hide a column by its data-column attribute
function toggleColumn(columnName, show) {
  const displayStyle = show ? 'table-cell' : 'none';
  // Toggle header
  document.querySelector(`th[data-column="${columnName}"]`).style.display = displayStyle;
  // Toggle all cells in the column
  document.querySelectorAll(`td[data-column="${columnName}"]`).forEach(cell => {
    cell.style.display = displayStyle;
  });
}

// Save column preferences to localStorage when a checkbox changes
columnCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    const column = checkbox.dataset.column;
    const isChecked = checkbox.checked;
    toggleColumn(column, isChecked);
    
    // Update saved preferences
    const savedColumns = JSON.parse(localStorage.getItem('coinTableColumns')) || {};
    savedColumns[column] = isChecked;
    localStorage.setItem('coinTableColumns', JSON.stringify(savedColumns));
  });
});

// Load preferences on page load
document.addEventListener('DOMContentLoaded', loadColumnPreferences);

Step 4: Add Basic Styling #

Make the UI look clean and intuitive with some CSS:

.column-settings-btn {
  margin: 10px 0;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  background: #f0f0f0;
  cursor: pointer;
  font-size: 14px;
}

.column-settings-btn:hover {
  background: #e0e0e0;
}

.column-settings-panel {
  position: absolute;
  top: 60px;
  right: 20px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: none;
  z-index: 100;
}

.column-settings-panel.active {
  display: block;
}

.column-settings-panel h4 {
  margin-top: 0;
  font-size: 16px;
}

.column-settings-panel ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.column-settings-panel li {
  margin: 8px 0;
  font-size: 14px;
}

Key Features: #

• Toggle Panel: Click the settings button to open/close the column selection panel
• Instant Column Control: Check/uncheck boxes to show/hide columns immediately
• Persistent Preferences: User choices are saved to localStorage so they persist across page reloads
• Flexible: Easy to add more columns by just adding a new checkbox and updating the table with the corresponding data-column attribute

Just drop these code snippets into your project, adjust the column names to match your actual table, and you'll have a fully functional custom column management system!

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