基于行数动态升序排列Div表格组件的实现需求

核心思路 #

• 统一表格容器的类名，简化选择器操作
• 编写排序函数，基于每个表格内的.row元素数量降序排列
• 在页面加载和数据变化时触发排序，实现动态更新

修改后的完整代码 #

CSS #

.justrow {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap; /* 小屏幕自动换行，优化布局 */
}
.table-container {
  display: table;
  width: 25%;
  border: 1px solid #ccc;
  margin: 10px 0; /* 增加间距提升美观度 */
}
.header {
  display: table-header-group;
  font-weight: bold;
}
.rowGroup {
  display: table-row-group;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  width: 25%;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
  border-left: 1px solid #ccc;
}

HTML #

<div class="justrow" id="tables-container">
  <div class="table-container">
    <div class="header">
      <div class="cell">Name</div>
      <div class="cell">Address</div>
      <div class="cell">Action</div>
    </div>
    <div class="rowGroup">
      <div class="row">
        <div class="cell">Bob</div>
        <div class="cell">Address</div>
        <div class="cell">Button</div>
      </div>
    </div>
    <div class="rowGroup">
      <div class="row">
        <div class="cell">Joe</div>
        <div class="cell">Address</div>
        <div class="cell">Button</div>
      </div>
    </div>
  </div>
  <div class="table-container">
    <div class="header">
      <div class="cell">Name</div>
      <div class="cell">Address</div>
      <div class="cell">Action</div>
    </div>
    <div class="rowGroup">
      <div class="row">
        <div class="cell">Bob1</div>
        <div class="cell">Address1</div>
        <div class="cell">Button1</div>
      </div>
    </div>
    <div class="rowGroup">
      <div class="row">
        <div class="cell">name1</div>
        <div class="cell">Address1</div>
        <div class="cell">Button1</div>
      </div>
      <div class="row">
        <div class="cell">name1</div>
        <div class="cell">Address1</div>
        <div class="cell">Button1</div>
      </div>
      <div class="row">
        <div class="cell">name1</div>
        <div class="cell">Address1</div>
        <div class="cell">Button1</div>
      </div>
      <div class="row">
        <div class="cell">name1</div>
        <div class="cell">Address1</div>
        <div class="cell">Button1</div>
      </div>
      <div class="row">
        <div class="cell">name1</div>
        <div class="cell">Address1</div>
        <div class="cell">Button1</div>
      </div>
      <div class="row">
        <div class="cell">name1</div>
        <div class="cell">Address1</div>
        <div class="cell">Button1</div>
      </div>
      <div class="row">
        <div class="cell">name1</div>
        <div class="cell">Address1</div>
        <div class="cell">Button1</div>
      </div>
    </div>
  </div>
  <div class="table-container">
    <div class="header">
      <div class="cell">Name</div>
      <div class="cell">Address</div>
      <div class="cell">Action</div>
    </div>
    <div class="rowGroup">
      <div class="row">
        <div class="cell">Bob</div>
        <div class="cell">Address</div>
        <div class="cell">Button</div>
      </div>
    </div>
    <div class="rowGroup">
      <div class="row">
        <div class="cell">Joe</div>
        <div class="cell">Address</div>
        <div class="cell">Button</div>
      </div>
      <div class="row">
        <div class="cell">Sue</div>
        <div class="cell">Address</div>
        <div class="cell">Button</div>
      </div>
      <div class="row">
        <div class="cell">Sue</div>
        <div class="cell">Address</div>
        <div class="cell">Button</div>
      </div>
      <div class="row">
        <div class="cell">Sue</div>
        <div class="cell">Address</div>
        <div class="cell">Button</div>
      </div>
    </div>
  </div>
</div>

<!-- 测试按钮：模拟数据新增场景 -->
<button onclick="addRowToFirstTable()">给第一个表格新增行</button>

JavaScript #

const tablesContainer = document.getElementById('tables-container');

// 按表格行数降序排序的核心函数
function sortTablesByRowCount() {
  const tables = Array.from(tablesContainer.querySelectorAll('.table-container'));
  
  // 比较两个表格的行数，降序排列
  tables.sort((a, b) => {
    const rowCountA = a.querySelectorAll('.row').length;
    const rowCountB = b.querySelectorAll('.row').length;
    return rowCountB - rowCountA;
  });
  
  // 清空容器后重新插入排序后的表格
  tablesContainer.innerHTML = '';
  tables.forEach(table => tablesContainer.appendChild(table));
}

// 页面加载完成后执行首次排序
window.addEventListener('DOMContentLoaded', sortTablesByRowCount);

// 示例：新增行后触发排序（实际业务中可替换为数据更新的触发逻辑）
function addRowToFirstTable() {
  const firstTable = document.querySelector('.table-container');
  const newRow = document.createElement('div');
  newRow.className = 'row';
  newRow.innerHTML = `
    <div class="cell">NewName</div>
    <div class="cell">NewAddress</div>
    <div class="cell">NewButton</div>
  `;
  firstTable.querySelector('.rowGroup:last-child').appendChild(newRow);
  
  // 新增行后重新排序
  sortTablesByRowCount();
}

关键说明 #

1. 统一类名：将原有的table/table2/table3替换为通用的table-container，避免重复CSS代码，同时方便批量选择所有表格。
2. 排序逻辑：通过统计每个表格内.row元素的总数，使用数组sort方法实现降序排列，再重新渲染到容器中。
3. 动态更新：只要在数据变化（新增/删除行、修改表格结构）时调用sortTablesByRowCount函数，就能自动更新表格顺序。示例中的按钮模拟了数据新增的场景，你可以根据实际业务需求调整触发时机。

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