如何从一系列数据属性的元素中更改 css？
Posted
技术标签:
【中文标题】如何从一系列数据属性的元素中更改 css？【英文标题】：How can I change the css from elements of a range of data attributes? 【发布时间】：2018-03-28 10:16:19 【问题描述】：我想对我的表格行从数据日期“2018-04-03”到数据日期“2018-04-06”进行着色。有没有办法用 jquery 定义这个数据属性范围。现在我只知道如何单独为每一行着色：
jQuery(document).ready(function()
jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
);
$("td[data-row='2'][data-date='2018-04-03']").css( "background":"lightblue", "border-right-color":"lightblue" )
$("td[data-row='2'][data-date='2018-04-04']").css( "background":"lightblue", "border-right-color":"lightblue" )
$("td[data-row='2'][data-date='2018-04-05']").css( "background":"lightblue", "border-right-color":"lightblue" )
$("td[data-row='2'][data-date='2018-04-06']").css( "background":"lightblue" ).table-scroll
position: relative;
margin: auto;
overflow: hidden;
.table-wrap
width: 100%;
overflow: auto;
.table-scroll table
width: 100%;
margin: auto;
border-collapse: separate;
border-spacing: 0;
.table-scroll th,
.table-scroll td
padding: 5px 10px;
white-space: nowrap;
vertical-align: top;
.clone
position: absolute;
top: 0;
left: 0;
pointer-events: none;
.clone th,
.clone td
visibility: hidden
.clone td,
.clone th
border-color: transparent
.clone tbody th
visibility: visible;
.clone .fixed-side
visibility: visible;
background-color: #fff;
font-weight: normal;
border: none;
border-right: 2px solid #f4f4f4;
.clone thead,
.clone tfoot
background: transparent;
.gantt-h
font-weight: normal;
color: #b0b0b0;
border-right: 2px solid #f4f4f4;
.last
border-right: 2px solid #f4f4f4;
.gantt td
border-right: 2px solid #f4f4f4;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="table-scroll" class="table-scroll">
<div class="table-wrap">
<table class="main-table table gantt">
<thead>
<tr>
<th class="fixed-side" scope="col" class="left-h" style="border-bottom:2px solid #f4f4f4;color:#b0b0b0">Task</th>
<th scope="col" class="gantt-h" style="font-weight:normal;color:#b0b0b0;">30 Mar</th>
<th scope="col" class="gantt-h">31 Mar</th>
<th scope="col" class="gantt-h">01 Apr</th>
<th scope="col" class="gantt-h">02 Apr</th>
<th scope="col" class="gantt-h">03 Apr</th>
<th scope="col" class="gantt-h">04 Apr</th>
<th scope="col" class="gantt-h">05 Apr</th>
<th scope="col" class="gantt-h">06 Apr</th>
<th scope="col" class="gantt-h">07 Apr</th>
<th scope="col" class="gantt-h">08 Apr</th>
<th scope="col" class="gantt-h">09 Apr</th>
<th scope="col" class="gantt-h">10 Apr</th>
<th scope="col" class="gantt-h">11 Apr</th>
<th scope="col" class="gantt-h">12 Apr</th>
<th scope="col" class="gantt-h">13 Apr</th>
<th scope="col" class="gantt-h">14 Apr</th>
<th scope="col" class="gantt-h">15 Apr</th>
</tr>
</thead>
<tbody>
<tr>
<th class="fixed-side"><i class="fa fa-folder-open-o" style="color:#9e9e9e"></i> Projekt 1</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> blue</th>
<td data-row="2" data-date="2018-03-30"></td>
<td data-row="2" data-date="2018-03-31"></td>
<td data-row="2" data-date="2018-04-01"></td>
<td data-row="2" data-date="2018-04-02"></td>
<td data-row="2" data-date="2018-04-03"></td>
<td data-row="2" data-date="2018-04-04"></td>
<td data-row="2" data-date="2018-04-05"></td>
<td data-row="2" data-date="2018-04-06"></td>
<td data-row="2" data-date="2018-04-07"></td>
<td data-row="2" data-date="2018-04-08"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> green</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> yellow</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> pink</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> orange</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>【问题讨论】：
【参考方案1】：至少，您可以将它们组合成一个选择器：
$("td[data-row='2'][data-date='2018-04-03'],td[data-row='2'][data-date='2018-04-04']")
.css( "background":"lightblue", "border-right-color":"lightblue" )
然后你可以用.filter()减少它
$("td[data-row='2']").filter("[data-date='2018-04-03'],[data-date='2018-04-04']")
.css( "background":"lightblue", "border-right-color":"lightblue" )
鉴于范围不固定，您可以使用循环构建选择器（创建一个巨大的选择器字符串），或者您可以循环遍历这些值，例如：
var cells = $("td[data-row='2']");
var start = new Date("2018-05-28");
var end = new Date("2018-06-02");
var newend = end.setDate(end.getDate()+1);
var end = new Date(newend);
while(start < end)
var datadate = start.toISOString().split('.')[0]+"Z";
cells.filter("[data-date='" + datadate + "']").css( "background":"lightblue", "border-right-color":"lightblue" )
var newDate = start.setDate(start.getDate() + 1);
start = new Date(newDate);
（循环来源：Javascript - get array of dates between 2 dates）
最后的选择是在过滤器中应用“比较”，类似于：
var start = new Date("2018-05-28");
var end = new Date("2018-06-02");
$("td[data-row='2']").filter(function()
var thisdate = $(this).data("date");
return (thisdate > start && thisdate <= end);
).css("background":"lightblue", "border-right-color":"lightblue")
顺便说一句，你最好使用一个类而不是直接设置 css 属性。
【讨论】：
【参考方案2】：for 循环将帮助您完成此操作。
var dates = ['2018-04-03','2018-04-04','2018-04-05','2018-04-06'];
for(var i=0; i<dates.length; i++)
$("td[data-date='"+dates[i]+"']").css( "background":"lightblue" )
【讨论】：
谢谢！但是我也必须每天写。没有选项可以将 2018-04-03 写入 2018-04-06？因为从 2018 年 4 月 3 日到 2019 年 1 月 2 日，我可能会有很大的范围。那将是很多数字以上是关于如何从一系列数据属性的元素中更改 css？的主要内容，如果未能解决你的问题，请参考以下文章