css - 周选择器 CSS
问题描述
我们使用的日期选择器没有我们需要的星期选择器功能。我想知道我们是否可以通过 CSS 伪造一个星期选择器,因为用户只能选择星期六。
我不能简单地定位并突出显示一行,因为服务器生成的代码如下所示:
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
是否可以写一些类似tr:focus:nth-child(6)
从<tr>
n-6 到 n 的东西,这样我就可以突出整个星期?
谢谢!
解决方案
我不认为这只能通过 CSS 来完成。希望这可以解决这个问题,这是一个通过 jquery 完成的小提琴(虽然只是化妆品亮点)。
这是我的小提琴 https://jsfiddle.net/too4svgm/1/
$("table td").click(function() {
$tds = $(this).parent().parent().find("td");
var a = $tds.index(this);
var c = a - 6;
$tds.css("background-color", "inherit");
$tds.filter(function(index) {
var b = (index <= a) && (index >= c);
return b;
}).css("background-color", "green");
});
推荐阅读
- google-cloud-pubsub - 多个应用实例使用来自 Pub/Sub 主题的所有消息
- macos - 使用 nasm 在 MacOX 上编译 asm 文件
- python - 如何在纯 python 中的 windows 上获取父 shell 的路径?
- reactjs - 反应原生 EXPO Javascript 混淆
- javascript - 控制台日志一直给我一个错误,我该如何解决这个问题?
- c# - 如何在 Azure 上存储 .Net 核心 Web 应用程序的文件上传
- c++ - 如何在 C++ 中无错误地声明向量?
- android - 如何在 Android Jetpack Compose 中创建可组合的多个预览?
- c# - 如何修复错误“无法加载hostfxr.dll”但找到(0x80070057)?
- git - Git pull origin main 给出错误 Aborting