如何让HTML中的<th>元素可点击并触发对应模态框

Alright, let's tweak your existing HTML table so that each header () is clickable, and clicking one opens a modal with unique content tailored to that header. Below is the full working code, plus a breakdown of what we added:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

/* Add pointer cursor to headers to indicate they're clickable */
th {
  cursor: pointer;
  background-color: #f2f2f2;
}

/* Modal styles */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 600px;
}

.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th id="company-header">Company</th>
    <th id="contact-header">Contact</th>
    <th id="country-header">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<!-- Modal element -->
<div id="header-modal" class="modal">
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <h3 id="modal-title"></h3>
    <p id="modal-body"></p>
  </div>
</div>

<script>
// Get modal elements
const modal = document.getElementById('header-modal');
const modalTitle = document.getElementById('modal-title');
const modalBody = document.getElementById('modal-body');
const closeBtn = document.querySelector('.close-btn');

// Define content for each header
const headerContent = {
  'company-header': {
    title: 'About Company Column',
    body: 'This column displays the name of each business or organization listed in our directory. All entries are verified to ensure accuracy.'
  },
  'contact-header': {
    title: 'About Contact Column',
    body: 'Here you\'ll find the primary point of contact for each company, typically a sales representative or account manager.'
  },
  'country-header': {
    title: 'About Country Column',
    body: 'This column shows the country where each company is headquartered. We cover businesses from all major regions around the globe.'
  }
};

// Add click event listeners to each header
document.querySelectorAll('th').forEach(header => {
  header.addEventListener('click', () => {
    const content = headerContent[header.id];
    if (content) {
      modalTitle.textContent = content.title;
      modalBody.textContent = content.body;
      modal.style.display = 'block';
    }
  });
});

// Close modal when clicking the X button
closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

// Close modal when clicking outside the modal content
window.addEventListener('click', (e) => {
  if (e.target === modal) {
    modal.style.display = 'none';
  }
});
</script>

</body>
</html>

Key Changes & Explanations: #

• Clickable Headers: We added cursor: pointer to the <th> styles so users know they can interact with them, plus unique IDs for each header to target them in JavaScript.
• Modal Structure: Added a hidden modal container with a semi-transparent background, a content box, and a close button. This stays hidden until a header is clicked.
• Custom Content Mapping: Created a JavaScript object headerContent that stores unique title and body text for each header. You can easily edit this to change what each modal displays.
• Click Handlers: Added event listeners to each header. When clicked, it pulls the corresponding content from the object, updates the modal, and shows it.
• Close Functionality: The modal closes when clicking the "X" button or clicking outside the modal content area, which is a standard user experience.

You can customize the modal styles (colors, width, positioning) and the content for each header by editing the CSS and the headerContent object respectively.

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