如何根据HTML中name类<td>元素的文本内容获取对应value类<td>元素的文本

Hey there! Let's walk through how to extract the value "zxcv" when the adjacent .name cell has the text "asdf" from your HTML structure. Below are practical approaches using both vanilla JavaScript and jQuery, depending on your project setup:

1. Vanilla JavaScript (No Libraries) #

Approach A: Iterate Through Table Rows #

This method is straightforward and works across all modern browsers. We'll loop through each row, check the .name cell's content, and grab the matching .value cell if we find a match:

// Get all <tr> elements from the table
const tableRows = document.querySelectorAll('tr');

// Loop through each row to check for our target
tableRows.forEach(row => {
  const nameCell = row.querySelector('.name');
  
  // Make sure the cell exists and its trimmed text matches "asdf"
  if (nameCell && nameCell.textContent.trim() === 'asdf') {
    const valueCell = row.querySelector('.value');
    if (valueCell) {
      const targetValue = valueCell.textContent.trim();
      console.log('Target value:', targetValue); // Outputs "zxcv"
      // Use targetValue for your needs here
    }
  }
});

Approach B: Direct Element Targeting (More Concise) #

If you prefer a shorter solution, we can use array methods to find the matching .name cell, then grab its sibling .value cell:

// Find the .name cell with trimmed text "asdf"
const matchingNameCell = Array.from(document.querySelectorAll('.name'))
  .find(cell => cell.textContent.trim() === 'asdf');

// If found, get the adjacent .value cell
if (matchingNameCell) {
  const targetValueCell = matchingNameCell.parentElement.querySelector('.value');
  // Or, since .value is the immediate next sibling in your structure:
  // const targetValueCell = matchingNameCell.nextElementSibling;
  
  const targetValue = targetValueCell.textContent.trim();
  console.log('Target value:', targetValue); // Outputs "zxcv"
}

Note: Using parentElement.querySelector('.value') is more robust if your HTML structure ever changes (e.g., extra elements added between .name and .value).

2. jQuery (If You're Using the Library) #

jQuery simplifies this with built-in selectors and traversal methods. Here's a one-liner (or near-one-liner) solution:

// Option 1: Use sibling traversal for exact text match
const targetValue = $('td.name').filter(function() {
  return $(this).text().trim() === 'asdf';
}).siblings('.value').text().trim();

console.log('Target value:', targetValue); // Outputs "zxcv"

// Option 2: Immediate next sibling selector (matches your exact HTML structure)
const targetValue = $('td.name:contains("asdf") + td.value').text().trim();
console.log('Target value:', targetValue);

The :contains selector is convenient, but keep in mind it matches partial text. If you need exact matching, the filter() method is more reliable.

Key Notes #

• Always use textContent.trim() (or $(this).text().trim() in jQuery) to ignore extra whitespace in your HTML cells.
• The vanilla JS approaches work without any external libraries, making them great for lightweight projects.

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