时间戳

首页 > 解决方案 > 边界半径对更改类没有影响

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

问题描述

我正在尝试将边框半径更改为表格的最后一行。我可以通过警报注意到课程正在按预期发生变化，但显然没有效果。但是例如，如果我调整窗口大小，那么它就会生效......太奇怪了

要更改课程，我使用如下：

 $("#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>

标签： jquerycss

解决方案

看起来chrome中存在渲染错误。解决它的一种方法是在 TD 内部使用 span。

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>

推荐阅读