客户端页面加载时将表格第三列空单元格行移至末尾（禁用排序插件）

Hey there, here's a straightforward vanilla JavaScript solution that does exactly what you need—no plugins, no sorting of other rows, just moving the target rows to the end once the page loads:

Step 1: Example HTML Table #

First, let's assume your table structure looks something like this (it's best to wrap rows in a <tbody> for cleaner manipulation):

<table id="targetTable" border="1">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Data</td>
      <td>Row 1 Data</td>
      <td>Full Value</td>
    </tr>
    <tr>
      <td>Row 2 Data</td>
      <td>Row 2 Data</td>
      <td></td> <!-- Empty third column -->
    </tr>
    <tr>
      <td>Row 3 Data</td>
      <td>Row 3 Data</td>
      <td>Another Value</td>
    </tr>
    <tr>
      <td>Row 4 Data</td>
      <td>Row 4 Data</td>
      <td> </td> <!-- Whitespace only, treated as empty -->
    </tr>
  </tbody>
</table>

Step 2: Vanilla JavaScript Code #

Add this script either at the end of your <body> tag or wrap it in a DOM load listener to ensure it runs after the table is fully rendered:

document.addEventListener('DOMContentLoaded', function() {
  // Grab the target table and its tbody element
  const table = document.getElementById('targetTable');
  const tbody = table.querySelector('tbody');
  // Collect rows where the third column is empty/whitespace-only
  const rowsToMove = [];
  
  // Loop through all rows in the tbody
  const rows = tbody.querySelectorAll('tr');
  rows.forEach(row => {
    const thirdColumn = row.cells[2];
    // Check if cell has no meaningful content (trim handles stray spaces)
    if (!thirdColumn.textContent.trim()) {
      rowsToMove.push(row);
    }
  });
  
  // Move each collected row to the end of the tbody
  rowsToMove.forEach(row => {
    tbody.removeChild(row);
    tbody.appendChild(row);
  });
});

How It Works #

• We use DOMContentLoaded to wait for the page to finish loading, so we don't try to manipulate elements that haven't rendered yet.
• We target the table's <tbody> specifically to avoid touching header rows in <thead>.
• We check the third column (index 2, since JavaScript uses 0-based indexing) and collect rows where the cell is empty or only contains whitespace.
• We remove each collected row from its original position and append it to the end of the tbody—this preserves the original order of all non-target rows, and the moved rows keep their relative order too.

This approach is lightweight, no external libraries required, and strictly follows your requirements: no sorting of other rows, automatic execution on page load, and no plugin dependencies.

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