添加过滤器脚本类时表行正在调整大小？

Posted 2023-03-05

【中文标题】添加过滤器脚本类时表行正在调整大小？

【英文标题】：Table row is resizing when adding filter script class?

【发布时间】：2020-05-06 22:14:38

【问题描述】：

我需要按类别过滤表格行，因此将类 filterTr 添加到元素 <tr> 但随后元素 <tr> 调整宽度并且不再与上面的元素 <th> 对齐。

我不知道为什么会这样。下面的 sn-p 是一个简化版本，但这里发生了同样的事情：

filterSelection("all")
function filterSelection(c) 
  var x, i;
  x = document.getElementsByClassName("filterTr");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) 
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  

function w3AddClass(element, name) 
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) 
    if (arr1.indexOf(arr2[i]) == -1) element.className += " " + arr2[i];
  

function w3RemoveClass(element, name) 
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) 
    while (arr1.indexOf(arr2[i]) > -1) 
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    
  
  element.className = arr1.join(" ");

var btnContainer = document.getElementById("sowClndr-filter");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) 
  btns[i].addEventListener("click", function()
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  );

/* Table filter */
.filterTr 
  display: none;

.filterBtn 
    margin-top:-10px!important;
    background-color:rgba(55,175,75,1.00)!important;
    color:rgba(255,255,255,1.00)!important;
    border:1px solid rgba(55,175,75,1.00)!important;
    text-align:left!important;
    font-weight:400!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    overflow:hidden!important;

.filterBtn:hover 
    background-color:rgba(255,255,255,0.00)!important;
    color:rgba(0,145,255,1.00)!important;
    border:1px solid rgba(0,145,255,1.00)!important;

.btn.active 
    background-color:rgba(255,255,255,0.00)!important;
    color:rgba(0,145,255,1.00)!important;
    border:1px solid rgba(0,145,255,1.00)!important;

.show 
  display: block;


/* Table styles */
.sowClndr-tr 
    background-color:rgba(255,255,255,1.00)!important;
    border:0!important;

.sowClndr-tr:hover 
    background-color:rgba(55,175,75,0.15)!important;
    border:0!important;

<div id="sowClndr-filter">
          <button class="btn btn-primary filterBtn active" onclick="filterSelection('all')"> All selections</button>
          <button class="btn btn-primary filterBtn" onclick="filterSelection('A')"> selection A</button>
          <button class="btn btn-primary filterBtn" onclick="filterSelection('B')"> selection B</button>
        </div>

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr class="sowClndr-tr filterTr A">
    <td>S1 fname lname</td>
    <td>lorem ipsum</td>
  </tr>
  <tr class="sowClndr-tr filterTr B">
    <td>lorem ipsum</td>
    <td>lorem ipsum</td>
  </tr>
</table>

【参考方案1】：

已解决

.show 类的 CSS 样式 display:block; 弄乱了表格布局，因为使用 JS 将 .show 类添加到 <tr> 以使其可见。解决方案是改用 CSS 样式 display:table-row;，现在它可以工作了。我直到现在才知道这种风格存在。