How can I change the css from elements of a range of data attributes?

Question

I want to color my table rows from data-date "2018-04-03" to data-date "2018-04-06". Is there a way to define this range of the data-attributes with jquery. Right now I only know how to color each row individually:

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;
}

fdomn-m · Accepted Answer

At a minimum, you can combine them into a single selector:

$("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" })

which you could then reduce with .filter()

$("td[data-row='2']").filter("[data-date='2018-04-03'],[data-date='2018-04-04']")
    .css({ "background":"lightblue", "border-right-color":"lightblue" })

given that the range would not be fixed, you could build up the selector using a loop (to create a giant selector string) or you could loop through the values, eg:

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);
}

(loop source: Javascript - get array of dates between 2 dates)

The final option would be to apply a 'compare' within a filter, something like:

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"})

As an aside, you'd be better off using a class rather than set css properties directly.

How can I change the css from elements of a range of data attributes?

Answers (2)

Related Questions