代码之家  ›  专栏  ›  技术社区  ›  tru7

冻结表中已呈现列的宽度

  •  0
  • tru7  · 技术社区  · 6 年前

    对于已呈现的表,如果隐藏某行,则会根据内容动态重新计算列的宽度:

    function switchRow(ixRow){
    
    let table = document.getElementById('theTable');
    
    let row = table.rows[ixRow];
    let currentVisibility = row.style.display;
    
    row.style.display= currentVisibility== 'none' ? 'table-row' : 'none';
    
    }
    table{
      border: 2px solid black;
      padding: .5em;
    }
    <table id='theTable'>
    <tr><td>Hellen</td><td>Smith</td></tr>
    <tr><td>Montgomery</td><td>Wolfeschlegelsteinhausenbergerdorff</td></tr>
    </table>
    <br>
    <button onclick="switchRow(1)">Switch row 1</button>

    有没有一种简单的方法可以在第一次渲染后“冻结”所有列的宽度,以便隐藏/显示所有表/列的宽度?

    编辑以区别于假定重复的其他问题 我想要的是保留在呈现表时计算的宽度——无论规则是显式的还是隐式的。一旦显示,宽度必须恒定。 我不想添加任何宽度优先规则,我想要表的默认呈现,但一旦呈现,我不会在宽度上进行动态更改。

    1 回复  |  直到 6 年前
        1
  •  1
  •   0xc14m1z    6 年前

    我会首先计算页面加载后的最大单元格宽度,并将其分配给单元格,以便以后保存:

    window.onload = function () {
       const table = document.getElementById('theTable');
       const widths = computeColumnWidths(table)
       setColumnWidths(table, widths)
    }
    
    function computeColumnWidths(table) {
      const widths = Array.from({ length: table.rows[0].cells.length })
                          .fill(0);
      
      for (let i = 0; i < table.rows.length; i++ ) {
        const row = table.rows[i]
        
        for (let j = 0; j < row.cells.length; j++) {
          const cell = row.cells[j]
          widths[j] = Math.max(widths[j], cell.offsetWidth);
        }
      }
      
      return widths;
    }
    
    function setColumnWidths(table, widths) {
      for (let i = 0; i < table.rows.length; i++ ) {
        const row = table.rows[i]
        
        for (let j = 0; j < row.cells.length; j++) {
          const cell = row.cells[j]
          cell.style.width = widths[j] + 'px';
        }
      }
    }
    
    function switchRow(ixRow){
    
      let table = document.getElementById('theTable');
    
      let row = table.rows[ixRow];
      let currentVisibility = row.style.display;
    
      row.style.display = currentVisibility == 'none' ? 'table-row' : 'none';
    
    }
    table{
      border: 2px solid black;
      padding: .5em;
    }
    <table id='theTable'>
    <tr><td>Hellen</td><td>Smith</td></tr>
    <tr><td>Montgomery</td><td>Wolfeschlegelsteinhausenbergerdorff</td></tr>
    </table>
    <br>
    <button onclick="switchRow(1)">Switch row 1</button>