Question

在已渲染表格的情况下，如果我隐藏一些行，则会根据内容动态重新计算列的宽度：

from functools import reduce 

input_list = ["=RE1ECTED 00000 00000",'OATE TIME =06/27/18 21 37','NACH NE NO xy']
Reg_dictionary = {"REJECTED" : ["=RE"],"DATE" : ["OA","DA"] }
l = []
for key,value in Reg_dictionary.items():
    temp = [key, value]
    for each_value in value:
        for string_list in input_list:
            count  = -1
            # print (count_number_of_string)
            each_in_string  = string_list.split(" ")
            for each_word in each_in_string:
                count = count + 1
                if each_value in each_word:
                    # print (count)
                    # print (string_list)
                    # print(each_word)
                    # print (key)
                    # print(each_in_string)
                    (each_in_string[count]) =key
                    #print(each_in_string)
                    l.append(reduce(lambda x,y: x+' '+y, each_in_string)) # added this line
print(l)

(\*(?!.*\d))

var ips = [
  '127.*.*.*',
  '127.0.*.*',
  '127.0.0.*',
  '127.*.*.1',
  '127.*.0.1',
  '127.0.*.1'
];

var regex = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|(\*(?!.*\d)))(\.|$)){4}$/;

for(var i = 0; i < ips.length; i++){
  console.log(ips[i] + ': ' + regex.test(ips[i]));
}

是否有一种简单的方法可以在第一次渲染后“冻结”所有列的宽度，以便隐藏/显示保持所有表/列的智慧？

编辑以区别于其他可能重复的问题我要寻找的是保留呈现表后计算出的宽度（无论规则是显式的还是隐式的）。一旦显示，宽度必须恒定。我不想添加任何宽度优先规则，我想要表的默认呈现，但是呈现后，我希望宽度不会动态变化。

Answer 1

我将首先计算页面加载后的最大单元宽度，并将其分配给单元，以备以后使用：

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>

冻结表中已呈现的列的宽度

1 个答案: