How can I get the data-attribute of each element with a function?

Question

I am trying to get the data-attribute of my tasks, but no matter what task I click I always get the alert "Projekt 1". But I would need "blue" by click on "blue" and "green" by click on "green".

jQuery(document).ready(function() {
  jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
});


$('.table-wrap').scrollLeft($('[data-date="2018-04-01"]').offset().left - 82);



$("body").on("click", function(e) {
            // the coordinate you clicked
            var x = e.clientX
            var y = e.clientY

            // all th.fixed-side in cloned table (include thead and tbody)
            var fixedSide = $('table.clone th.fixed-side')

            // calculate the height of cloned table's tbody
            var tableHeight = fixedSide.get(0).offsetHeight * fixedSide.length - 1;

            // th's width
            var offsetWidth = fixedSide.get(0).offsetWidth;

            // calculate offsetTop and offsetLeft from body
            var offset = getOffset(fixedSide.get(0))

            // skip thead's th
            offset.Top += fixedSide.get(0).offsetHeight;

            // check if click inside the range
            var inRange = (x >= offset.Left && x <= offset.Left + offsetWidth) &&
                (y >= offset.Top && y <= offset.Top + tableHeight)

            if (inRange) {
                var name = $(e.target).closest('table').find("[data-name]").data("name");
                alert(name);
            }
        });

        function getOffset(element) {
            var offsetTop = 0;
            var offsetLeft = 0;
            do {
                offsetTop += element.offsetTop;
                offsetLeft += element.offsetLeft;
            } while (element = element.offsetParent);
            var offset = {
                Left: offsetLeft,
                Top: offsetTop,
            }
            return offset;
        }

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

.today {
  background-color: pink;
  width: 100px;
  cursor: pointer
}

Ankit Agarwal · Accepted Answer

Use closest('tr') instead of closest('table') and it will work:

jQuery(document).ready(function() {
  jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
});


$('.table-wrap').scrollLeft($('[data-date="2018-04-01"]').offset().left - 82);



$("body").on("click", function(e) {
            // the coordinate you clicked
            var x = e.clientX
            var y = e.clientY

            // all th.fixed-side in cloned table (include thead and tbody)
            var fixedSide = $('table.clone th.fixed-side')

            // calculate the height of cloned table's tbody
            var tableHeight = fixedSide.get(0).offsetHeight * fixedSide.length - 1;

            // th's width
            var offsetWidth = fixedSide.get(0).offsetWidth;

            // calculate offsetTop and offsetLeft from body
            var offset = getOffset(fixedSide.get(0))

            // skip thead's th
            offset.Top += fixedSide.get(0).offsetHeight;

            // check if click inside the range
            var inRange = (x >= offset.Left && x <= offset.Left + offsetWidth) &&
                (y >= offset.Top && y <= offset.Top + tableHeight)

            if (inRange) {
                var name = $(e.target).closest('tr').find("[data-name]").data("name");
                alert(name);
            }
        });

        function getOffset(element) {
            var offsetTop = 0;
            var offsetLeft = 0;
            do {
                offsetTop += element.offsetTop;
                offsetLeft += element.offsetLeft;
            } while (element = element.offsetParent);
            var offset = {
                Left: offsetLeft,
                Top: offsetTop,
            }
            return offset;
        }

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

.today {
  background-color: pink;
  width: 100px;
  cursor: pointer
}

How can I get the data-attribute of each element with a function?

Answers (2)

Related Questions