如何通过JavaScript点击表格属性并引用选中的属性？

Hey there! Let's break down how to handle clicking table elements to interact with attributes and reference the selected one in JavaScript. I'll walk you through a practical, flexible example that works for most common scenarios.

Let's start with a simple table where each row represents an attribute (with a name and value). I'll add a data-attr attribute to each row to make it easy to identify the attribute name, but you can also use text content if you prefer:

<table id="attributeTable">
  <thead>
    <tr>
      <th>Attribute</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr data-attr="username">
      <td>Username</td>
      <td>jane_smith</td>
    </tr>
    <tr data-attr="email">
      <td>Email</td>
      <td>jane@example.com</td>
    </tr>
    <tr data-attr="accountStatus">
      <td>Account Status</td>
      <td>Active</td>
    </tr>
  </tbody>
</table>

I'll use event delegation here (attaching the click listener to the table itself instead of each row) because it's more efficient, especially if your table rows are added dynamically later. We'll also store the selected attribute in a variable so you can reference it anywhere in your code.

// Grab the table element
const attributeTable = document.getElementById('attributeTable');

// Variable to store our selected attribute (accessible in your script's scope)
let selectedAttribute = null;

// Add click listener to the table
attributeTable.addEventListener('click', (event) => {
  // Find the closest row that has our data-attr attribute
  const targetRow = event.target.closest('tr[data-attr]');
  
  if (!targetRow) return; // Exit if we didn't click a relevant row
  
  // Extract the attribute details
  const attrName = targetRow.dataset.attr;
  const attrValue = targetRow.querySelector('td:last-child').textContent.trim();
  
  // Update our selected attribute variable
  selectedAttribute = {
    name: attrName,
    value: attrValue
  };
  
  // Add visual feedback (highlight the selected row)
  // Remove highlight from all rows first
  document.querySelectorAll('tr[data-attr]').forEach(row => row.classList.remove('selected'));
  targetRow.classList.add('selected');
  
  // Quick confirmation (you can remove this in production)
  console.log('Selected attribute:', selectedAttribute);
  alert(`You picked: ${selectedAttribute.name} = ${selectedAttribute.value}`);
});

Add a little CSS to make the selection visible:

tr[data-attr] {
  cursor: pointer;
  transition: background 0.2s;
}

tr.selected {
  background-color: #e3f2fd;
  font-weight: 500;
}

tr[data-attr]:hover {
  background-color: #f5f5f5;
}

Since selectedAttribute is declared in a scope that's accessible to other parts of your script, you can use it anywhere you need. For example:

// Example function that uses the selected attribute
function processSelectedAttribute() {
  if (!selectedAttribute) {
    console.log('No attribute selected yet!');
    return;
  }
  
  // Do something with the attribute - here are a few ideas:
  // 1. Populate a form field
  // document.getElementById('attrNameInput').value = selectedAttribute.name;
  // 2. Send it to an API
  // fetch('/api/process-attribute', {
  //   method: 'POST',
  //   body: JSON.stringify(selectedAttribute)
  // });
  // 3. Display it somewhere else on the page
  document.getElementById('selectedAttrDisplay').textContent = 
    `Current Selection: ${selectedAttribute.name} = ${selectedAttribute.value}`;
}

If you only want to trigger the click when the user clicks the attribute name cell (not the whole row), just adjust the closest selector:

const targetCell = event.target.closest('td[data-attr]');
// Then get the row from the cell, and extract details similarly

That's it! This setup is flexible and works for static or dynamically generated tables.

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