gpt4 book ai didi

jquery - 边界半径对改变类没有影响

转载 作者:太空宇宙 更新时间:2023-11-04 06:13:12 26 4
gpt4 key购买 nike

我正在尝试将边框半径更改为表格的最后一行。我可以通过警报注意到类(class)正在按预期进行更改,但显然没有效果。但是例如,如果我调整窗口大小,那么它就会生效……好奇怪

要更改类,我使用如下:

 $("#tab-users-team tbody tr:last td").each( function() {
if ( $(this).hasClass("inf-left-corner") ) {
alert($(this).attr("class")); // <-- check
$(this).removeClass("inf-left-corner");
$(this).addClass("inf-left-corner-dis");
alert($(this).attr("class")); // <-- check OK
}
});

样式很简单:

.inf-left-corner {
border-radius: 0px 0px 0px 15px;
}
.inf-left-corner-dis {
border-radius: 0px 0px 0px 0px !important;
}

关键是,正如我之前所说,如果重新加载窗口,它就会生效,如果我添加 background-color: blue;,它也会将半径更改为 0。可能有解释,但对我来说没有任何意义......非常感谢任何帮助。

function e() {
var register =
"<tr id='user3'>"
+ "<td class='inf-left-corner'>Albert</td>"
+ "<td class='inf-right-corner'>Rumber</td>"
+ "</tr>";

// Remove last
$("#tab-users-team tbody tr:last-child td").each( function() {
if ( $(this).hasClass("inf-left-corner") ) {
$(this).removeClass("inf-left-corner");
$(this).addClass("inf-left-corner-dis");
}
if ( $(this).hasClass("inf-right-corner") ) {
$(this).removeClass("inf-right-corner");
$(this).addClass("inf-right-corner-dis");
}
});
$('#tab-users-team tbody').append ( register );
}
tbody tr:nth-child(odd) {
background-color: #4f90c833;
}

tbody tr:nth-child(even) {
background-color: #4f90c855;
}

.sup-left-corner {
border-radius: 15px 0px 0px 0px;
}

.sup-right-corner {
border-radius: 0px 15px 0px 0px;
}

.inf-right-corner {
border-radius: 0px 0px 15px 0px;
}

.inf-left-corner {
border-radius: 0px 0px 0px 15px;
}


.inf-right-corner-dis {
border-radius: 0px 0px 0px 0px !important;
}

.inf-left-corner-dis {
border-radius: 0px 0px 0px 0px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table id="tab-users-team">
<thead>
<tr>
<th class="sup-left-corner">Name</th>
<th class="sup-right-corner">Provider</th>
</tr>
</thead>
<tbody>
<tr id="user1">
<td>Henry</td>
<td>Groshil</td>
</tr>
<tr class="row-us" id="user2">
<td class="inf-left-corner">Allister
</td>
<td class="inf-right-corner">Frisper
</td>
</tr>
</tbody>
</table>
<button id="add" onclick="e()" type="button">X</button>
</body>
</html>

最佳答案

Chrome 中似乎存在渲染错误。绕过它的一种方法是在 TD 内部使用跨度。

function e() {
var register =
"<tr>" +
"<td><span>Alber</span></td>" +
"<td><span>Rumber</span></td>" +
"</tr>";

$('#tab-users-team tbody').append(register);
}
tbody tr td span {
display: block;
width: 100%;
background-color: #4f90c855;
}

tbody tr:nth-child(odd) td span {
background-color: #4f90c833;
}

tbody tr:last-child td:first-child span {
border-radius: 0px 0px 0px 15px;
}

tbody tr:last-child td:last-child span {
border-radius: 0px 0px 15px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
<table id="tab-users-team">
<thead>
<tr>
<th class="sup-left-corner">Name</th>
<th class="sup-right-corner">Provider</th>
</tr>
</thead>
<tbody>
<tr id="user1">
<td><span>Henry</span></td>
<td><span>Groshil</span></td>
</tr>
<tr class="row-us" id="user2">
<td><span>Allister</span>
</td>
<td><span>Frisper</span>
</td>
</tr>
</tbody>
</table>
<button id="add" onclick="e()" type="button">X</button>
</body>

</html>

关于jquery - 边界半径对改变类没有影响,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56221909/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com