javascript - 如何通过添加类在td内显示圆圈？

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>