Как отобразить круг в тд, добавив класс?

Question

У меня есть таблица, и я хотел бы изменить класс на td, щелкнув по ним. Когда я addClass() меняет каждую ячейку, но, кажется, переопределяет любой класс.

Мой желаемый результат для каждой ячейки такой:

Как мне добиться этого, добавив к ним класс?

$(function() {
  $("td").click(function() {
    $(this).addClass('outpatient');
  });
});

table td {
  width: 20px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid gray;
  text-align: center;
  padding: 5px;
  cursor: pointer;
  background-color: aqua;
}

.outpatient {
  background-color: yellow;
  border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

Answer 1

Для этого можно создать еще один элемент внутри каждого td. td будет использоваться для отображения квадрата с фоном бирюзового цвета. Внутренний элемент необходим для отображения круга с желтым фоном. По умолчанию круг может быть скрыт, а затем отображаться при добавлении класса к родителю td. Попробуйте это:

$(function() {
  $("td").click(function() {
    $(this).addClass('outpatient');
  });
});

table td {
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid gray;
  text-align: center;
  cursor: pointer;
  background-color: aqua;
  padding: 0;
  margin: 0;
  position: relative;
}

td div {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  line-height: 32px;
  margin: -1px;
  box-sizing: border-box;
}

td.outpatient div {
  background-color: yellow;
  border-radius: 50%;
  border-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td><div>1</div></td>
    <td><div>2</div></td>
    <td><div>3</div></td>
  </tr>
  <tr>
    <td><div>4</div></td>
    <td><div>5</div></td>
    <td><div>6</div></td>
  </tr>
  <tr>
    <td><div>7</div></td>
    <td><div>8</div></td>
    <td><div>9</div></td>
  </tr>
</table>

Answer 2

Вы можете рассмотреть background-image с радиальным градиентом, чтобы создать круг над background-color

$(function() {
  $("td").click(function() {
    $(this).addClass('outpatient');
  });
});

table td {
  width: 20px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid gray;
  text-align: center;
  padding: 15px;
  cursor: pointer;
  background-color:aqua;
}
.outpatient {
  background-image:
    radial-gradient(farthest-side,yellow calc(100% - 3px),#000 calc(100% - 2px),transparent 100%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>