css - 添加过滤器脚本类时表行正在调整大小?
问题描述
我需要按类别过滤表行,以便将类filterTr
添加到元素中<tr>
,然后元素<tr>
调整宽度并且不再与<th>
上面的元素对齐。
我不知道为什么会这样。下面的代码片段是一个简化版本,但这里也发生了同样的事情:
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>
解决方案
解决了
display:block;
class的 CSS 样式.show
弄乱了表格布局,因为 class.show
添加到<tr>
使用 JS 使其可见。解决方案是改用 CSS 样式display:table-row;
,现在可以了。直到现在我才知道这种风格存在。
推荐阅读
- java - 使用 SSL 的 Websocket 客户端端点
- node.js - Rbomongo 和 Robo3t 启动错误对话框
- java - JAVA AES ECB 加密到 Golang 迁移
- artificial-intelligence - 蒙特卡洛树搜索 - 处理游戏结束节点
- tcp - 如果我在以太网 II、巨型帧和 DIX 的数据中间和数据包末尾看到以太网 FCS,该怎么办
- rest - CodenameOne:使用 REST PATCH 调用的问题
- java - 如何在 JUnit 测试用例中使用 BeanPostProcessor
- python-3.x - 在 Windows 10 64 位版本中找不到名为 tensorflow 的模块
- android - 手机喜欢(oppo)fcm通知声音来但通知不可见
- c# - Application Insights 不包括由自定义 ITelemetryInitializer 设置的属性