CODEWITHSUNDEEP
jquerycss
dapdap
dapdap

Reputation: 11

Border radius has no effect on changing class

I am trying to change the border radius to the last row of a table. I can notice by an alert that the class is changing as expected but has no effect apparently. But for example, if I resize the window, then it takes effect... so weird

To change class I use as follows:

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

The styles are simply:

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

The point is, as I said before if the window is reloaded, it takes effect, and if I add background-color: blue; it changes the radius to 0 too. May have an explanation but for me has no sense... any help is really appreciated.

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>

Upvotes: 0

Views: 56

Answers (1)

epascarello
epascarello

Reputation: 207557

Looks like there is a rendering bug in chrome. One way to get around it is to use a span inside of the TDs. 

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>

Upvotes: 1

Related Questions