Angular表格行点击背景持久化及document.querySelector选择异常咨询

1. Fixing document.querySelector Always Selecting the First Table Row #

The core problem here is how document.querySelector behaves: it only returns the first element that matches your selector. If you’re using something like document.querySelector('tr'), it will always grab the first <tr> in the DOM, regardless of which row you interact with. Here’s how to fix it based on your use case:

• Target the clicked row specifically:
  Instead of querying the DOM globally, use the event object from your click handler to get the exact row that was clicked. For example:

  // Inside your row click handler
  function handleRowClick(event) {
    const clickedRow = event.currentTarget; // This points to the <tr> that triggered the click
    // Do your logic with clickedRow here
  }
  

  event.currentTarget is reliable here because it refers to the element the event listener is attached to, even if the click originated from a child element inside the row.

• Select all rows if needed:
  If you need to work with all table rows, use document.querySelectorAll('tr') instead — this returns a NodeList of all matching elements, which you can loop through:

  const allRows = document.querySelectorAll('tr');
  allRows.forEach(row => {
    // Perform actions on each row
  });
  

2. Persisting Blue Background on Clicked Angular Table Row Until Panel Closes #

For your Angular table, we’ll track the selected row using a controller property and use ng-class to apply the newClass conditionally. Here’s a step-by-step solution:

Step 1: Add a selected row tracker in your controller #

First, initialize a property to store the index (or unique ID) of the selected row:

// Inside your component controller
this.selectedRowIndex = -1; // -1 means no row is selected initially

this.onRowClick = function(row, index) {
  this.selectedRowIndex = index; // Set the selected row's index
  // Your existing code to open the panel goes here
};

// Add a method to reset selection when the panel closes
this.onPanelClose = function() {
  this.selectedRowIndex = -1; // Clear the selected row state
};

Step 2: Update the ng-class directive in your <tr> #

Modify the ng-class to apply newClass only when the current row’s index matches the selected index:

<tr class="rowClass" 
    ng-click="$ctrl.onRowClick(row[0], $index);" 
    ng-class="{'newClass': $ctrl.selectedRowIndex === $index}" 
    ng-repeat="row in $ctrl.rows track by $index">
  <!-- Your table cells go here -->
</tr>

Step 3: Ensure newClass overrides hover styles #

Make sure your CSS for newClass has higher specificity than the default hover style to avoid conflicts:

/* Default hover background */
.rowClass:hover {
  background-color: lightblue;
}

/* Selected row solid blue background (higher specificity) */
.rowClass.newClass {
  background-color: blue;
  /* Add any additional styles for the selected state */
}

Step 4: Trigger onPanelClose when the panel closes #

Whenever your panel is closed (e.g., via a close button click), call $ctrl.onPanelClose() to clear the selected row state and remove the blue background.

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