Javascript 如何通过添加类来显示td内的圆？

我有一个表，我想通过单击它们来更改

td

上的类。当I

addClass（）

时，每个单元格都会更改，但它似乎覆盖了任何类

我对每个单元格的期望结果如下：

如何通过向它们添加类来实现这一点

$（函数（）{
$（“td”）。单击（函数（）{
$（this.addClass（“门诊”）；
});
});
表td{
宽度：20px；
溢出：隐藏；
显示：内联块；
空白：nowrap；
边框：1px纯色灰色；
文本对齐：居中；
填充物：5px；
光标：指针；
背景色：浅绿色；
}
.门诊{
背景颜色：黄色；
边界半径：50%；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
要实现这一点，可以在每个
td
中创建另一个元素。
td
将用于显示带有teal背景的正方形。内部元素是显示黄色背景的圆圈所必需的。默认情况下，圆可以隐藏，然后在将类添加到父类时显示。试试这个：


$（函数（）{
$（“td”）。单击（函数（）{
$（this.addClass（“门诊”）；
});
});
表td{
溢出：隐藏；
空白：nowrap；
边框：1px纯色灰色；
文本对齐：居中；
光标：指针；
背景色：浅绿色；
填充：0；
保证金：0；
位置：相对位置；
}
运输署分区{
宽度：32px；
高度：32px；
边框：1px实心透明；
线高：32px；
保证金：-1px；
框大小：边框框；
}
td.门诊部{
背景颜色：黄色；
边界半径：50%；
边框颜色：灰色；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
要实现这一点，可以在每个
td
中创建另一个元素。
td
将用于显示带有teal背景的正方形。内部元素是显示黄色背景的圆圈所必需的。默认情况下，圆可以隐藏，然后在将类添加到父类时显示。试试这个：


$（函数（）{
$（“td”）。单击（函数（）{
$（this.addClass（“门诊”）；
});
});
表td{
溢出：隐藏；
空白：nowrap；
边框：1px纯色灰色；
文本对齐：居中；
光标：指针；
背景色：浅绿色；
填充：0；
保证金：0；
位置：相对位置；
}
运输署分区{
宽度：32px；
高度：32px；
边框：1px实心透明；
线高：32px；
保证金：-1px；
框大小：边框框；
}
td.门诊部{
背景颜色：黄色；
边界半径：50%；
边框颜色：灰色；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
<代码> > p>您可以考虑“径向渐变”代码>背景图像< /代码>，以创建在<代码>背景颜色< /代码> 
之上的圆。

$（函数（）{
$（“td”）。单击（函数（）{
$（this.addClass（“门诊”）；
});
});
表td{
宽度：20px；
溢出：隐藏；
显示：内联块；
空白：nowrap；
边框：1px纯色灰色；
文本对齐：居中；
填充：15px；
光标：指针；
背景色：浅绿色；
}
.门诊{
背景图像：
径向梯度（最远侧，黄色钙（100%-3px），#000钙（100%-2px），透明100%）；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
<代码> > p>您可以考虑“径向渐变”代码>背景图像< /代码>，以创建在<代码>背景颜色< /代码> 
之上的圆。

$（函数（）{
$（“td”）。单击（函数（）{
$（this.addClass（“门诊”）；
});
});
表td{
宽度：20px；
溢出：隐藏；
显示：内联块；
空白：nowrap；
边框：1px纯色灰色；
文本对齐：居中；
填充：15px；
光标：指针；
背景色：浅绿色；
}
.门诊{
背景图像：
径向梯度（最远侧，黄色钙（100%-3px），#000钙（100%-2px），透明100%）；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
您的类覆盖TD状态。您的类覆盖TD状态。