javascript jquery html-table clone custom-data-attribute

How can I get a data attribute from a cloned table?

By click on one of the tasks in my scrollable menu, I want to alert the data-name. But the alert is "undefined".

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 = $(this).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
}

<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 data-name="Projekt 1" class="fixed-side project"><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 data-name="blue" 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 data-name="green" 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 data-name="yellow" 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 data-name="pink" 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 data-name="orange" 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>

Solution

Your issue is in this code block:

if (inRange) {
    var name = $(this).data("name");
    alert(name);
}

Change:

$(this).data("name");

with:
$(e.target).closest('tr').find("[data-name]").data("name");

According to your comment:

Now I get "Projekt 1" but whereever I click. Even if I click on blue or green etc.

The click event handler can be changed and simplified in order to satisfy your request:

$("body").on("click", "[data-name]", function (e) {
     var name = $(this).data("name");
     alert(name);
});

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",   "[data-name]", function (e) {
        var name = $(this).data("name");
        alert(name);
    });
});

.table-scroll {
    position: relative;
    margin: auto;
    overflow: hidden;
    height: 220px;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<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 data-name="Projekt 1" class="fixed-side project"><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 data-name="blue" 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 data-name="green" 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 data-name="yellow" 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 data-name="pink" 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 data-name="orange" 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>