Question

我正在尝试将边框半径更改为表格的最后一行。我可以通过警报注意到该类正在按预期进行更改，但显然没有任何作用。但是例如，如果我调整窗口大小，那么它将生效...所以很奇怪

要更改班级，请按以下步骤操作：

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

Answer 1

好像是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>

边框半径对更改类别没有影响

1 个答案: