Question

点击我的可滚动菜单中的某个任务，我想提醒data-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", 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>

Answer 1

您的问题出在此代码块中：

type Bivariant f = (Functor f, Contravariant f)

phantom :: Bivariant f => f a -> f b  -- Data.Functor.Contravariant

instance Bivariant r => Generic (Data r) where
  type Rep (Data r) = r
  from (Data r) = phantom r
  to = Data . phantom

变化：

$（this）.data（“name”）;

使用：
的 $（e.target）.closest（ 'TR'）找到（ “[数据名称]”）的数据（ “姓名”）;

根据你的评论：

现在我得到“Projekt 1”但是我点击了。即使我点击蓝色或绿色等。

可以更改和简化点击事件处理程序，以满足您的请求：

private static final int CHOOSE_FILE_REQUESTCODE = 8777; private static final int PICKFILE_RESULT_CODE = 8778;

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

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

Answer 2

$(this)不是指克隆表，请尝试：

替换：

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

使用：

var name = $(".main-table.clone").data("name");

如何从克隆表中获取数据属性？

2 个答案: