如何仅获取HTML表格中有值的行与列？求简便实现方法

Great question! When dealing with HTML tables cluttered with empty cells or rows, filtering down to only the meaningful data (rows with at least one non-empty cell, columns with at least one value across all rows) is totally achievable with straightforward scripts. Below are practical approaches for both client-side (browser) and server-side workflows.

Client-Side Approach (JavaScript) #

If you’re working directly in the browser (e.g., manipulating a table on a webpage or scraping data), here’s a step-by-step script tailored to your table ID:

// Target your specific table
const table = document.getElementById('tblPayslipApproval');
const tbody = table.querySelector('tbody');
const rows = Array.from(tbody.querySelectorAll('tr'));

// Step 1: Filter out completely empty rows
const nonEmptyRows = rows.filter(row => {
  const cells = Array.from(row.querySelectorAll('td'));
  // Check for non-whitespace content (handles   too)
  return cells.some(cell => {
    const content = cell.textContent.trim();
    return content !== '' && content !== '\u00A0';
  });
});

// Step 2: Identify columns with at least one non-empty value
const columnCount = nonEmptyRows[0]?.querySelectorAll('td').length || 0;
const validColumns = [];

for (let colIndex = 0; colIndex < columnCount; colIndex++) {
  const hasValue = nonEmptyRows.some(row => {
    const cell = row.querySelectorAll('td')[colIndex];
    const content = cell?.textContent.trim();
    return content !== '' && content !== '\u00A0';
  });
  if (hasValue) validColumns.push(colIndex);
}

// Step 3: Build the filtered table (preserves original styles)
const filteredTable = document.createElement('table');
filteredTable.id = 'filtered-' + table.id;
filteredTable.setAttribute('cellspacing', '0');
filteredTable.setAttribute('border', '0');
const filteredTbody = document.createElement('tbody');

nonEmptyRows.forEach(row => {
  const newRow = document.createElement('tr');
  newRow.className = row.className;
  validColumns.forEach(colIndex => {
    const cell = row.querySelectorAll('td')[colIndex];
    newRow.appendChild(cell.cloneNode(true));
  });
  filteredTbody.appendChild(newRow);
});

filteredTable.appendChild(filteredTbody);

// Replace original table or append to DOM (uncomment as needed)
// table.replaceWith(filteredTable);
document.body.appendChild(filteredTable);

Key JS Notes: #

• Handles whitespace and non-breaking spaces ( ) which are common in "empty" table cells.
• Preserves original row/column classes and styles so the filtered table matches your design.
• Adjust the content check if you need to target specific data types (e.g., numbers only).

Server-Side Approach (Python with BeautifulSoup) #

If you’re parsing HTML on the server (e.g., scraping data from a webpage), BeautifulSoup simplifies this process:

First, install dependencies if you haven’t:

pip install beautifulsoup4 requests

Then, use this script:

from bs4 import BeautifulSoup

# Replace with your actual HTML content
html = """
<table id="tblPayslipApproval" cellspacing="0" border="0">
  <tbody>
    <tr class="tr-border-full">
      <td style="min-width:50px">EARNINGS</td>
      <td style="min-width:50px"></td>
      <td style="min-width:50px" class="td-border-right"></td>
      <td style="min-width:50px" align="center">Basic</td>
      <td style="min-width:50px">5000</td>
    </tr>
    <tr class="tr-border-full">
      <td></td>
      <td></td>
      <td></td>
      <td>Allowance</td>
      <td>1000</td>
    </tr>
    <tr class="tr-border-full">
      <td>DEDUCTIONS</td>
      <td></td>
      <td></td>
      <td>Tax</td>
      <td>500</td>
    </tr>
  </tbody>
</table>
"""

soup = BeautifulSoup(html, 'html.parser')
table = soup.find('table', id='tblPayslipApproval')
tbody = table.find('tbody')
rows = tbody.find_all('tr')

# Step 1: Filter out empty rows
non_empty_rows = []
for row in rows:
    cells = row.find_all('td')
    has_content = any(cell.get_text(strip=True) != '' for cell in cells)
    if has_content:
        non_empty_rows.append([cell.get_text(strip=True) for cell in cells])

# Step 2: Identify valid columns
if not non_empty_rows:
    print("No non-empty rows found.")
else:
    column_count = len(non_empty_rows[0])
    valid_columns = [i for i in range(column_count) if any(row[i] != '' for row in non_empty_rows)]

    # Step 3: Build filtered table data (convert back to HTML if needed)
    filtered_data = [[row[i] for i in valid_columns] for row in non_empty_rows]

    # Optional: Reconstruct filtered HTML table
    filtered_table = soup.new_tag('table', id='filtered-tblPayslipApproval', cellspacing='0', border='0')
    filtered_tbody = soup.new_tag('tbody')
    for row_data in filtered_data:
        tr = soup.new_tag('tr', class_='tr-border-full')
        for cell_data in row_data:
            td = soup.new_tag('td')
            td.string = cell_data
            tr.append(td)
        filtered_tbody.append(tr)
    filtered_table.append(filtered_tbody)

    # Print or save the result
    print(filtered_table.prettify())

Key Python Notes: #

• get_text(strip=True) automatically trims whitespace and handles  .
• Converts table data to a list of lists for easy manipulation, then can reconstruct HTML if needed.
• Works with external pages: replace the sample HTML with content fetched via requests.get().

Edge Cases to Keep in Mind #

• Merged cells (colspan/rowspan): The scripts above work for simple tables; merged cells require extra logic to expand them before filtering.
• Hidden content: If cells are hidden via CSS, add checks for style.display !== 'none' (JS) or parse inline styles (Python) if you want to exclude them.

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